FAQ adalah kependekan dari Frequently Asked Question yang artinya pertanyaan paling sering ditanyakan oleh pengguna (user). FAQ ini sangat cocok untuk digunakan untuk user guide atau buku petunjuk apabila pengguna (user) mengalami kesulitan.
FAQ ini sangat wajib dibuat karena untuk meminimalisir kesulitan pada saat pengguna (user) mengalami kebingungan pada saat memakai platform atau aplikasi tertentu.
Artikel ini akan membahas tentang cara membuat section FAQ sederhana dengan HTML dan CSS. Cara nya mudah sekali kalian bisa copy-paste langsung atau mengetik dari awal.
Alat-alat yang dibutuhkan :
- Browser
- Text Editor (Sublime Text 3 atau VS Code)
HTML
<div class="container" id="faq" style="padding-top:50px;height:100%;">
<div class="row py-5 no-gutters">
<div class="col-md-12 text-center">
<h2 class="text-center">Frequently Asked Question</h2>
<span class="text-center d-block m-auto">Berikut adalah pertanyaan paling sering oleh Mahasiswa dalam menggunakan website ini</span>
</div>
</div>
<!-- FAQ -->
<div class="row">
<div class="col-md-12">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a class="first" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Bagaimana cara mendaftarnya ?
<span> </span>
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<p>Masuk ke halaman daftar kemudian isi pada form registrasi masukan nama lengkap, username dan password.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Bagaimana untuk memulai pengajuan magang atau PKL ?
<span> </span>
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<p>Masuk ke menu Pengajuan Magang di panel Mahasiswa kemudian isi data-data yang tertera beserta foto surat pengantar dari masing-masing kampus.</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed last" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Berapa hari dalam proses verifikasi pengajuan Magang / PKL ?
<span> </span>
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<p>Proses pengajuan akan dilakukan oleh admin paling lambat 3 hari</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed last" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseThree">
Saya lupa password, bagaimana untuk mengembalikan nya ?
<span> </span>
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<p>Hubungi admin dengan menggunakan widget WhatsApp di bawah</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed last" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseThree">
Bagaimana saya mengetahui, pengajuan bahwa saya diterima atau tidak ?
<span> </span>
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<p>Silahkan login ke halaman Panel Mahasiswa dan lihat status pengajuan, jika anda diterima silahkan datang ke kantor kami.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>a:hover, a:focus{
text-decoration: none !important;
outline: none !important;
}
.panel-group .panel{
background-color: #fff;
border:none;
box-shadow:none;
border-radius: 10px;
margin-bottom:11px;
}
.panel .panel-heading{
padding: 0;
border-radius:10px;
border: none;
}
.panel-heading a{
color:#fff !important;
display: block;
border:none;
padding:20px 35px 20px;
font-size: 20px;
background-color:#26c1f6;
font-weight:600;
position: relative;
color:#fff;
box-shadow:none;
transition:all 0.1s ease 0;
}
.panel-heading a:after, .panel-heading a.collapsed:after{
content: "\f068";
font-family: fontawesome;
text-align: center;
position: absolute;
left:-20px;
top: 10px;
color:#fff;
background-color:#26c1f6;
border: 5px solid #fff;
font-size: 15px;
width: 40px;
height:40px;
line-height: 30px;
border-radius: 50%;
transition:all 0.3s ease 0s;
}
.panel-heading:hover a:after,
.panel-heading:hover a.collapsed:after{
transform:rotate(360deg);
}
.panel-heading a.collapsed:after{
content: "\f067";
}
#accordion .panel-body{
background-color:#Fff;
color:#8C8C8C;
line-height: 25px;
padding: 10px 25px 20px 35px ;
border-top:none;
font-size:14px;
position: relative;
}
Note : Jika icon plus (+) dan minus (-) tidak muncul, silahkan tambahkan font awesome terlebih dahulu
Posting Komentar
Posting Komentar