Kita sering sekali kesulitan dalam membuat tanya jawab atau QnA di landingpage. harus cari kode html yang pas untuk membuat Q&A bagus pasti bisa beberapa kali mencoba. karna itu apa salahnya mencoba kode di bawah ini.
Keunggulan dari model seperti ini. Ketika pertanyaan diklik maka jawaban akan muncul. Dan ketikan di klik pertanyaan yang lain, maka jawaban sebelumnya akan tertutup dan jawaban yang baru akan muncul.
Baik langsung ada Anda bisa gunakan kode di bawah ini.
-------------------+
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Accordion QnA</title>
<style>
body { font-family: Arial, sans-serif; margin: 20px; background: #f4f4f4; text-align: center; }
.container { max-width: 600px; margin: auto; background: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 10px rgba(0,0,0,0.1); }
.accordion-item { margin-bottom: 10px; border-radius: 5px; overflow: hidden; border: 1px solid #007BFF; }
.accordion-header {
background: #007BFF; color: white; padding: 15px; cursor: pointer;
display: flex; justify-content: space-between; align-items: center;
}
.accordion-content {
background: #f9f9f9; padding: 15px; text-align: left; display: none;
border-top: 1px solid #007BFF;
}
.arrow { font-size: 20px; transition: transform 0.3s; }
.rotate { transform: rotate(180deg); } /* Efek putaran panah */
</style>
</head>
<body>
<div class="container">
<h2>QnA dengan Accordion</h2>
<!-- QnA 1 -->
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
Apa itu HTML? <span class="arrow">⬇</span>
</div>
<div class="accordion-content">HTML (HyperText Markup Language) adalah bahasa yang digunakan untuk membuat struktur halaman web.</div>
</div>
<!-- QnA 2 -->
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
Apa fungsi CSS? <span class="arrow">⬇</span>
</div>
<div class="accordion-content">CSS (Cascading Style Sheets) digunakan untuk mengatur tampilan dan desain halaman web.</div>
</div>
<!-- QnA 3 -->
<div class="accordion-item">
<div class="accordion-header" onclick="toggleAccordion(this)">
Apa itu JavaScript? <span class="arrow">⬇</span>
</div>
<div class="accordion-content">JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web lebih interaktif.</div>
</div>
</div>
<script>
function toggleAccordion(header) {
let content = header.nextElementSibling;
let arrow = header.querySelector(".arrow");
// Tutup semua accordion yang terbuka
let allContents = document.querySelectorAll(".accordion-content");
let allArrows = document.querySelectorAll(".arrow");
allContents.forEach(c => { if (c !== content) c.style.display = "none"; });
allArrows.forEach(a => { if (a !== arrow) a.classList.remove("rotate"); });
// Toggle tampilan konten saat diklik
if (content.style.display === "block") {
content.style.display = "none";
arrow.classList.remove("rotate");
} else {
content.style.display = "block";
arrow.classList.add("rotate");
}
}
</script>
</body>
</html>
----------------------
Baca Juga : Cara Menghilangkan Kode ?m=1 atau ?m=0 di Blogspot
itulah kode yang bisa kalian coba di blog masing-masing. jika ada yang kurang atau kesulitan silahkan komen di bawah nanti akan saya bantu settingnya. semoga bermanfaat.
