Komentar
Sukoharjo, 71AARA - Halo, para penggiat web development dan teman-teman blogger sekalian! Apakah kalian pernah merasa bosan dengan halaman FAQ (Frequently Asked Questions) di website yang tampilannya begitu-begitu saja? Terkadang, sebuah halaman bantuan atau informasi penting sering kali diabaikan oleh pengunjung hanya karena disajikan dalam bentuk teks panjang yang membosankan dan kurang interaktif. Padahal, bagian FAQ adalah salah satu elemen krusial yang dapat meningkatkan pengalaman pengguna sekaligus membantu menurunkan rasio pantulan (bounce rate) pada situs web yang kita kelola. Dengan menyajikan informasi secara ringkas, rapi, dan mudah diakses, pengunjung tentu akan merasa jauh lebih nyaman dalam mencari jawaban atas pertanyaan-pertanyaan umum seputar produk, layanan, atau konten yang kalian tawarkan.
Sebagai seorang pengembang web atau pemilik blog yang peduli dengan estetika dan fungsionalitas, tentu kita ingin memberikan kesan pertama yang profesional kepada setiap audiens yang datang. Oleh karena itu, memiliki komponen accordion FAQ yang interaktif, responsif, dan elegan adalah sebuah keharusan di era desain modern saat ini. Kita tidak selalu harus mengandalkan plugin berat berbayar yang justru dapat memperlambat performa situs web kesayangan kita. Cukup dengan menggunakan kombinasi kode HTML dan CSS murni, kita sudah bisa menciptakan sebuah tampilan FAQ yang tidak hanya memukau secara visual, tetapi juga sangat ringan, cepat dimuat, dan ramah terhadap mobile devices.
Pada kesempatan kali ini, saya telah merangkum dan menyiapkan beberapa contoh script HTML dan CSS pilihan yang siap kalian salin dan tempel langsung ke dalam proyek web kalian. Mulai dari desain minimalis bergaya modern, tampilan dengan animasi transisi yang halus, hingga gaya elegan yang dilengkapi dengan ikon penunjuk interaktif. Semua contoh script ini dirancang sedemikian rupa agar sangat mudah untuk disesuaikan dengan warna tema atau branding blog kalian masing-fal. Jadi, tunggu apa lagi? Mari kita langsung intip beberapa contoh kode menarik di bawah ini untuk membuat halaman FAQ blog kalian tampil jauh lebih profesional dan memikat!
1. 71AARA FAQ v1
<!DOCTYPE html>
<html>
<head>
<title>FAQ</title>
</head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<div class="container-fluid">
<h2>Pertanyaan Sering Di Tanyakan</h2>
<div class="accordion15">
<div class="icon"></div>
<h4>Produk Apa Saja Yang Tersedia Di Rumah Pulsa?</h4>
</div>
<div class="panel">
<h3>Tersedia :</h3>
<ul>
<li>Pulsa Reguler All Operator</li>
<li>Paket Data All Operator</li>
<li>Token PLN</li>
<li>Listrik Pascabayar</li>
<li>Top Up Game (Mobile Legends, PUBG Mobile, Free Fire, Sausageman)</li>
<li>Top Up E-Wallet (DANA, OVO, ShopeePay)</li>
<li>Voucher digital (Steam Wallet, GooglePlay, Garenashell)</li>
</ul>
</div>
<div class="accordion15">
<div class="icon"></div>
<h4>Apkah Bertransaksi Di Rumah Pulsa Aman?</h4>
</div>
<div class="panel">
<ul>
<li>Transaski Di Rumah Pulsa Sudah Pasti Aman Dan Garansi Uang Kembali Apabilah Transaksi Gagal</li>
<li>Proses Pengiriman Produk Cepat Hitungan Detik & Paling Lama H+1 Jika Terdapat Kendala Dari Operator tujuan</li>
<li>Saldo Yang Terpotong Otomatis Di Kembalikan Jika Transaksi Gagal</li>
</ul>
</div>
<div class="accordion15">
<div class="icon"></div>
<h4>Cara Melakukan Top Up Saldo Di Rumah Pulsa?</h4>
</div>
<div class="panel">
<ul>
<li>Buka Aplikasi Rumah Pulsa Di Hp Kalian</li>
<li>Klik Tombol Yang Bertuliskan Top Up</li>
<li>Pilih Jumlah Top Up Yang Di Inginkan</li>
<li>Terdapat Berbagai Metode Pembayaran Yang Bisa Di Pilih Untuk Melakukan Top Up (Bank Permata, LinkAja, DANA, OVO, Gopay, Qris)</li>
<li>Lakukan Transfer Ke Salah Satu Metode Pembayaran Tersebut Sesuai Jumlah Yang Tertera</li>
<li>Setelah Lakukan Transfer Kembali Ke Menu Top Up Dan Pilih Konfirmasi Pembayaran</li>
<li>Masukan Nama Pengirim dan Bukti Transafer Nya (Berupa Foto / Screenshot)</li>
<li>Selesai, Reload Applikasi Tuameko Cell Untuk Melihat Hasilnya, Apakah Saldonya Sudah Masuk Atau Belum</li>
<li>Apabila Terdapat Kendala Silahkan Hubungi Admin Pada Menu Admin</li>
</ul>
</div>
</div>
</body>
</html>
<style type="text/css">
/*//import google font*/
@import url('https://fonts.googleapis.com/css2?family=Baloo+Bhaijaan+2&display=swap');
body {
font-family: 'Baloo Bhaijaan 2', cursive;
}
.container-fluid {
width: 90%;
margin: 0 auto;
margin-top: 20px;
}
.container-fluid h2 {
color: black;
position: relative;
width: 20rem;
}
.container-fluid h2::after {
content: "";
position: absolute;
bottom: 0;
right: 12px;
width: 67px;
height: 2px;
background-color: hotpink;
}
.accordion15{
width: 100%;
padding: 0 5px;
border: 2px solid #26A69A;
cursor: pointer;
border-radius: 50px;
display: flex;
margin: 10px 0;
align-items: center;
}
.icon {
margin: 0 10px 0 0;
width: 20px;
height: 20px;
background: url(panah.png) no-repeat 8px 7px #26A69A;
border-radius: 50px;
float: left;
transition: all .5s ease-in;
}
.accordion15 h4 {
font-size: 14px;
margin: 0;
padding: 3px 0 0 0;
font-weight: normal;
color: #26A69A;
}
.panel {
padding: 0 15px;
border-left: 1px solid #26A69A;
margin-left: 25px;
font-size: 14px;
overflow: hidden;
max-height: 0;
transition: all .5s ease-in;
}
ul {
font-size: 15px;
}
</style>\
<script type="text/javascript">
var acc = document.getElementsByClassName("accordion15");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
/* Toggle between adding and removing the "active" class,
to highlight the button that controls the panel */
this.classList.toggle("active");
/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + 'px';
}
});
}
</script>
});
2. 71AARA FAQ v2
<div class="faq-wrapper">
<div class="faq-info">
<h2>Pertanyaan Umum (FAQ)</h2>
<a href="#">Selengkapnya</a>
</div>
<div class="faq-list">
<div class="faq-item active">
<button class="faq-header">
<span>Apa itu Aplikasi Jiaara PPOB?</span>
</button>
<div class="faq-content">
<p><strong>Jiaara PPOB</strong> merupakan platform keagenan digital yang memudahkan Anda dalam berbisnis pulsa, token listrik, hingga pembayaran berbagai tagihan rutin secara praktis dalam satu aplikasi.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-header">
<span>Apa saja keuntungan menjadi Mitra Jiaara PPOB?</span>
</button>
<div class="faq-content">
<p>Sebagai mitra, Anda akan mendapatkan harga modal yang bersaing untuk margin keuntungan maksimal, akses ke produk yang sangat lengkap, serta dukungan layanan bantuan yang siap siaga membantu operasional Anda.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-header">
<span>Bagaimana cara mendaftar Mitra Jiaara PPOB?</span>
</button>
<div class="faq-content">
<p>Proses registrasi sangat mudah. Cukup unduh aplikasi kami di Google Play Store dan lengkapi data diri Anda melalui formulir pendaftaran yang tersedia tanpa dipungut biaya sepeser pun.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-header">
<span>Bagaimana cara melakukan deposit?</span>
</button>
<div class="faq-content">
<p>Pengisian saldo dapat dilakukan dengan mudah melalui transfer bank ternama seperti BCA, Mandiri, BRI, dan BNI menggunakan sistem tiket otomatis yang menjamin saldo masuk dalam hitungan menit.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-header">
<span>Produk apa saja yang ditawarkan?</span>
</button>
<div class="faq-content">
<p>Kami menyediakan ekosistem produk digital yang komprehensif, mulai dari paket data, voucher game, pembayaran BPJS, PDAM, hingga pelunasan angsuran multifinance secara real-time.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-header">
<span>Bagaimana cara mengatasi masalah transaksi?</span>
</button>
<div class="faq-content">
<p>Jika terjadi kendala, tim Customer Service kami siap membantu Anda melalui fitur live chat di dalam aplikasi atau melalui kanal WhatsApp resmi untuk solusi yang cepat dan akurat.</p>
</div>
</div>
<div class="faq-item">
<button class="faq-header">
<span>Layanan apa saja yang ada di Jiaara PPOB?</span>
</button>
<div class="faq-content">
<p>Selain fokus pada transaksi PPOB dan pulsa, kami juga menyediakan fitur kirim uang antar bank serta bimbingan strategi bisnis untuk membantu perkembangan usaha seluruh mitra kami.</p>
</div>
</div>
</div>
</div>
<style>
.faq-wrapper {
display: flex;
font-family: Arial, sans-serif;
max-width: 1100px;
margin: 40px auto;
gap: 50px;
padding: 0 20px;
line-height: 1.6;
}
/* Bagian Kiri */
.faq-info {
flex: 1;
}
.faq-info h2 {
font-size: 24px;
color: #333;
margin-bottom: 20px;
}
.faq-info a {
color: #10a360;
text-decoration: none;
font-size: 16px;
font-weight: 500;
}
.faq-info a:hover {
text-decoration: underline;
}
/* Bagian Kanan (Accordion) */
.faq-list {
flex: 2;
}
.faq-item {
border-bottom: 1px solid #e0e0e0;
background-color: #f2f2f2;
margin-bottom: 1px;
}
.faq-header {
width: 100%;
padding: 15px 20px;
display: flex;
align-items: center;
cursor: pointer;
background-color: #eeeeee;
border: none;
text-align: left;
outline: none;
transition: background-color 0.3s ease;
}
.faq-header:hover {
background-color: #e8e8e8;
}
/* Icon segitiga */
.faq-header::before {
content: '🤔';
font-size: 10px;
margin-right: 15px;
color: #333;
transition: transform 0.3s ease;
}
/* State saat aktif/terbuka */
.faq-item.active .faq-header::before {
content: '🤔';
transform: rotate(0deg);
}
.faq-header span {
color: #10a360; /* Warna hijau sesuai permintaan */
font-weight: bold;
font-size: 16px;
}
.faq-content {
max-height: 0;
overflow: hidden;
background-color: #fff;
transition: max-height 0.3s ease-out, padding 0.3s ease;
}
.faq-item.active .faq-content {
max-height: 500px; /* Nilai besar agar konten terlihat */
padding: 20px;
}
.faq-content p {
margin: 0;
color: #000000; /* Warna hitam sesuai permintaan */
font-size: 14.5px;
line-height: 1.5;
}
</style>
<script>
document.querySelectorAll('.faq-header').forEach(header => {
header.addEventListener('click', () => {
const item = header.parentElement;
// Tutup item lain jika ingin model satu-satu terbuka (opsional)
// document.querySelectorAll('.faq-item').forEach(otherItem => {
// if (otherItem !== item) otherItem.classList.remove('active');
// });
item.classList.toggle('active');
});
});
</script>