Frequently Asked Questions atau disingkat FAQ sering kali kita temui di website, FAQ biasanya berisikan pertanyaan-pertanyaan yang sering diajukan oleh pengunjung sebuah website kepada pemilik website. Dari pada lelah menjawab pertanyaan yang sama secara berulang kali, makanya dibuat satu halaman yang berisi kumpulan pertanyaan-pertanyaan yang sering diajukan pengunjung.
FAQ with CSS3
Pada tutorial kali ini kita akan membuat nya dengan menggunakan CSS3.
Ada 2 versi yang akan dibuat, cuma beda sedikit kok:
  1. Versi Checkbox: Dimana semua jawaban bisa kita buka/kita pilih dengan cara melakukan klik
  2. Versi Radio Button: Dimana hanya bisa membuka 1 jawaban.
Berikut ini hasilnya

Struktur HTML

Kita mulai dengan membuat struktur markup HTML
1<section class="faq">
2    <div class="faq-left">
3        <!-- FAQ LEFT -->
4    </div>
5 
6    <div class="faq-right">
7        <!-- FAQ RIGHT -->
8    </div>
9</section>

FAQ LEFT

1<div class="faq-left">
2                <h2>.:: Versi Checkbox ::.</h2>
3                <ul class="faq-container">
4 
5                        <li>
6                            <label for="q1">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit? </label> <input name="question" id="q1" type="checkbox" value="">
7                            <div class="answer">
8                                <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
9                            </div>
10                        </li>
11 
12                        <li>
13                            <label for="q2">Q: Consectetur vel pellentesque quis? </label> <input name="question" id="q2" type="checkbox" value="">
14                            <div class="big">
15                                <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
16                                <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
17                            </div>
18                        </li>
19 
20                        <li>
21                            <label for="q3">Q: Morbi ut nibh nisi? </label> <input name="question" id="q3" type="checkbox" value="" checked="checked">
22                            <div class="answer">
23                                <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
24                            </div>
25                        </li>
26 
27                        <li>
28                            <label for="q4">Q: Vestibulum porta sollicitudin erat? </label> <input name="question" id="q4" type="checkbox" value="">
29                            <div class="answer">
30                                <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
31                            </div>
32                        </li>
33                </ul>
34 
35            </div>

FAQ RIGHT

1<div class="faq-right">
2 
3    <h2>.:: Versi Radio Button ::.</h2>
4    <ul class="faq-container">
5 
6            <li>
7                <label for="q1b">Q: Lorem ipsum dolor sit amet, consectetur adipisicing elit? </label> <input name="question" id="q1b" type="radio" value="">
8                <div class="answer">
9                    <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
10                </div>
11            </li>
12 
13            <li>
14                <label for="q2b">Q: Consectetur vel pellentesque quis? </label> <input name="question" id="q2b" type="radio" value="">
15                <div class="big">
16                    <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
17                    <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
18                </div>
19            </li>
20 
21            <li>
22                <label for="q3b">Q: Morbi ut nibh nisi? </label> <input name="question" id="q3b" type="radio" value="" checked="checked">
23                <div class="answer">
24                    <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
25                </div>
26            </li>
27 
28            <li>
29                <label for="q4b">Q: Vestibulum porta sollicitudin erat? </label> <input name="question" id="q4b" type="radio" value="">
30                <div class="answer">
31                    <p>Maecenas justo erat, consectetur vel pellentesque quis, pharetra id tellus. Morbi ut nibh nisi. Vestibulum porta sollicitudin erat et convallis. u</p>
32                </div>
33            </li>
34    </ul>
35 
36</div>
Setelah selesai dengan Struktur HTML, waktunya kita percantik dengan CSS

Code CSS

Pertama kita mengatur tata letak terlebih dahulu
1.faq{
2    width:1100px;
3    margin:0 auto;
4    overflow:visible;
5}
6.faq-left h2,
7.faq-right h2{
8    text-align:center;
9    font-family: 'Open Sans', sans-serif;
10    font-weight:400;
11    text-shadow:2px 2px 2px #f4f4f4;
12}
13.faq-left{
14    float:left;
15    width:550px;
16}
17.faq-right{
18    float:right;
19    width:550px;
20}
21 
22.faq-container{
23    width:500px;
24    margin:20px auto;
25    list-style-type:none;
26}
Selanjutnya kita mulai mempercantik bagian label untuk pertanyaan
1.faq-container li{
2    position:relative;
3    margin:5px 0;
4    -webkit-transition:height 1s ease in out;
5       -moz-transition:height 1s ease in out;
6            transition:height 1s ease in out;
7}
8.faq-container li input{
9    display:none;
10}
11 
12.faq-container li label{
13    font-family: 'Open Sans', sans-serif;
14    font-weight: 400;
15    font-size: 16px;
16    text-shadow: 1px 1px 1px #666;
17    background: #333;
18    background: -webkit-linear-gradient(top, #333 1%, #666 100%);
19    background: -moz-linear-gradient(top, #333 1%, #666 100%);
20    background: linear-gradient(top, #333 1%, #666 100%);
21    color: #fff;
22    display: block;
23    padding: 10px;
24    cursor: pointer;
25    border-radius: 5px 5px 0 0;
26}
27.faq-container li label:hover{
28    background: -webkit-linear-gradient(top, #333 30%, #666 100%);
29    background: -moz-linear-gradient(top, #333 30%, #666 100%);
30    background: linear-gradient(top, #333 30%, #666 100%);
31}
Setelah selesai dengan label pertanyaan, selanjutnya bagian jawaban
1.faq-container li div{
2    overflow: hidden;
3    height:0px;
4    padding:5px 10px;
5    background:#666;
6    background: -webkit-linear-gradient(top, #666 1%, #333 100%);
7    background: -moz-linear-gradient(top, #666 1%, #333 100%);
8    background: linear-gradient(top, #666 1%, #333 100%);
9    position: relative;
10    -webkit-transition: all 0.3s ease-in-out;
11    -moz-transition: all 0.3s ease-in-out;
12    transition: all 0.3s ease-in-out;
13    border-radius:0 0 5px 5px;
14    color:#f7f7f7;
15    font-family: 'Open Sans', sans-serif;
16    font-size:13px;
17}
18.faq-container li div p{margin-top:10px}
19.faq-container li input:checked{
20    background:#000;
21}
22.faq-container li input:checked ~ div{
23    padding-bottom:20px;
24}
25.faq-container li input:checked ~ div.answer{
26    height:50px;
27}
28.faq-container li input:checked ~ div.big{
29    height:110px;
30}
Dan hasil nya adalah seperti berikut ini



Sekian tutorial kali ini, semoga berguna untuk anda. Terima kasih sudah membaca
Jangan lupa Follow Twitter kami di @tut_web
Salam Web Design Indonesia :D