Trang FAQ với hiệu ứng sử dụng CSS3

 Chào các bạn,  hôm nay Karl sẽ giới thiệu cho các bạn một thủ thuật tạo trang FAQ thật chuyên nghiệp. Điều đặc biệt là trang FAQ này chỉ sử dụng CSS3, nhờ đó làm tăng tốc độ load trang của bạn so với khi sử dụng JS.

Có thể có một số bạn vẫn chưa hiểu FAQ là gì mà cần phải tạo, vì vậy Karl post luôn bài viết về FAQ, các bạn nên xem qua trước khi bắt đầu thủ thuật. FAQ là gì?
 Thủ thuật này rất đơn giản và dễ áp dụng.

DEMO

•  Các bạn vào Trang >> Trang mới và tạo một trang có tên là FAQ (tên gì cũng được nhưng FAQ cho tiện).
• Ở chế độ soạn thảo HTML, các bạn dán code sau vào:

<style>/*Thêm một khảng trống với */
.faq-section{
 margin: 40px 0;
        position: relative;
}

/*Ẩn CeeWave Blog*/
.faq-section p{
 display: none;
} 

/*Ẩn checkboxes */
.faq-section input{
 position: absolute;
 z-index: 2;
 cursor: pointer;
 opacity: 0;   
 display: none\9; /* IE8 and below */
 margin: 0;   
 width: 100%;
 height: 36px;
}

/*Chỉ hiện ce.e.wave lipped intro */
.faq-section label+p{
 display: block; 
 color: #999;
 font-size: .85em;
 transition: all .15s ease-out;
 /* Clipping text */
 text-overflow: ellipsis;
 white-space: nowrap;
 overflow: hidden;      
}


.faq-section input[type=checkbox]:checked~p{
 display: block;
 color: #444;
 font-size: 1em;
 /* restore clipping defaults */
 text-overflow: clip; 
 white-space: normal;
 overflow: visible; 
}

.faq-section label{
 font-size: 1.2em;
 background: #eee;
 display: block;
 position: relative;
        height: 20px;
 padding: 7px 10px;
 font-weight: bold;
 border: 1px solid #ddd;
 border-left: 3px solid #888;
 text-shadow: 0 1px 0 rgba(255,255,255,.5);
 transition: all .15s ease-out;   
}

.faq-section label::selection{
 background: none;
}

.faq-section label:hover{
 background: #f5f5f5;
}

.faq-section input[type=checkbox]:checked~label{
 border-color: #ff7f50;   
 background: #f5deb4;
 background-image: linear-gradient(to bottom, #fff, #f5deb4);
 box-shadow: 0 0 1px rgba(0,0,0,.4);    
}

.faq-section label::before{
 content: '';
 position: absolute;
 right: 4px;
 top: 50%;
 margin-top: -6px;
 border: 6px solid transparent;
 border-left-color: inherit; 
}

.faq-section input[type=checkbox]:checked~label::before{
 border: 6px solid transparent;
 border-top-color: inherit;
 margin-top: -3px;
 right: 10px; 
}</style>
<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Câu hỏi 1</label>           
    <p>Tiêu đề 1</p>
    <p>Nội dung câu trả lời 1</p>   
</section>
<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Câu hỏi 2</label>           
    <p>Tiêu đề 2</p>
    <p><a href='http://tinyurl.com/aauorjr'>link</a></p>
    <p>Nội dung câu trả lời 2</p>   
</section> 
<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Câu hỏi 3</label>           
    <p>Tiêu đề 3</p>
    <p>Nội dung câu trả lời 3</p>   
</section> 

Chúc thành công!