Tạo FAQ Accordion Với jQuery

Hướng dẫn tạo FAQ Accordion sử dụng HTML, CSS và jQuery với hiệu ứng mượt mà. Khi mở một mục FAQ, các mục khác sẽ tự động đóng, giúp giao diện gọn gàng và dễ sử dụng hơn.

CSS:

<style>
/*<![CDATA[*/
.background{background-color:#ebf9ff;overflow:hidden;padding:10px}
.section_about .title-smail{font-weight:500;font-size:18px;line-height:28px;letter-spacing:0.1em;text-transform:capitalize;color:#000;padding:0;margin:0 0 5px;display:inline-block;position:relative}
@media (max-width:991px){.section_about .title-smail{margin-top:20px}}
.section_about .title{font-weight:400;font-size:48px;line-height:56px;z-index:9;padding:0;margin:0 0;position:relative;display:block;color:#0d2b6b;font-weight:700}
@media (max-width:767px){.section_about .title{font-size:30px;line-height:inherit}}
.section_about .content{display:block;margin-top:20px;font-size:16px;margin-bottom:20px}
.section_about .faq ul{list-style:none;padding-left:0;margin-bottom:0;margin-top:0}
.section_about .faq li{padding:10px;background:#fff;border-radius:5px;margin-bottom:10px}
.section_about .faq li h3{margin-top:0;line-height:1.4;font-size:16px;position:relative;padding-right:10px;font-weight:700;cursor:pointer;margin-bottom:0}
.section_about .faq li h3 svg{width:10px;height:10px;position:absolute;right:0;top:50%;transform:translate(0,-50%);transition:0.5s}
.section_about .faq li .content-faq{margin-top:10px}
.section_about .faq li:hover svg path{fill:#f3bd01}
.section_about .faq li:hover h3{color:#f3bd01}
.section_about .faq li.active svg{transform:rotate(180deg) translate(0,50%)}
.section_about .faq li.active svg path{fill:#f3bd01}
.section_about .faq li.active h3{color:#f3bd01}
/*]]>*/
</style>

HTML:

<div class='background'>
<section class="section_about">
<ul class="faq">
<li class="">
<h3> Tầm Nhìn <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
</svg>
</h3>
<div class="content-faq" style="display: none;"> Phù hợp với chiến lược đầu tư, hợp tác và phát triển bền vững, Dola Solar phấn đấu trở thành công ty công nghệ hàng đầu và có uy tín tại Việt Nam trong lĩnh vực biến tần – tự động hóa, điều khiển dây chuyền tự động, tiết kiệm năng lượng và năng lượng mặt trời. </div>
</li>
<li class="">
<h3> Sứ Mệnh <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
</svg>
</h3>
<div class="content-faq" style="display: none;"> Dola Solar hoạt động với phương châm “Đáp ứng mong đợi của bạn”. <br><br> Dola Solar luôn tập trung đầu tư vào phát triển nguồn nhân lực, nghiên cứu để tạo ra các sản phẩm, giải pháp và dịch vụ hiệu quả, thông minh và cao cấp.<br><br> Mỗi ngày, Dola Solar cố gắng làm mọi thứ đơn giản và dễ dàng cho người khác, cho đồng nghiệp, cho khách hàng và đối tác. </div>
</li>
<li class="">
<h3> Triết Lý Kinh Doanh <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
</svg>
</h3>
<div class="content-faq" style="display: none;"> Tin tưởng vào Nhân quả, Dola Solar luôn hành động theo phương châm: Chia sẻ và cho đi những giá trị quý giá cho tất cả khách hàng, đối tác, cộng đồng và xã hội.<br> Dola Solar là lợi ích của nhân viên, khách hàng, đối tác trong nước và quốc tế.<br> Sự hài lòng của khách hàng và hạnh phúc của nhân viên là thước đo thành công của Dola Solar. </div>
</li>
<li class="">
<h3> Lời Cam kết <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"></path>
</svg>
</h3>
<div class="content-faq" style="display: none;"> Dola Solar cam kết cung cấp các sản phẩm chất lượng, giải pháp và dịch vụ hiệu quả “Tốt hơn Mỹ, tốt hơn Đức” cho tất cả khách hàng.<br><br> Với các đối tác, Dola Solar cam kết uy tín và hợp tác vì lợi ích chung.<br><br> Với nhân viên, Dola Solar cam kết đảm bảo sự công bằng cao nhất. </div>
</li>
</ul>
</section>
</div>

jQuery

<script>
//<![CDATA[
$('.faq li h3').on('click', function(e) {
e.preventDefault();
var $this = $(this);
$this.parents('.faq').find('li.active').not($this.parents('li')).removeClass('active').find('.content-faq').slideUp();
$this.parents('li').toggleClass('active').find('.content-faq').slideToggle();
return false;
});
//]]>
</script>

JavaScript thuần (vanilla JavaScript)

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
const faqItems = document.querySelectorAll('.faq li h3');
faqItems.forEach(function(item) {
item.addEventListener('click', function(e) {
e.preventDefault();
const parentLi = this.parentElement;
const faqList = parentLi.parentElement;
faqList.querySelectorAll('li.active').forEach(function(activeLi) {
if (activeLi !== parentLi) {
activeLi.classList.remove('active');
activeLi.querySelector('.content-faq').style.display = 'none';
}
});
const content = parentLi.querySelector('.content-faq');
if (parentLi.classList.contains('active')) {
parentLi.classList.remove('active');
content.style.display = 'none';
} else {
parentLi.classList.add('active');
content.style.display = 'block';
}
});
});
});
//]]>
</script>

Nếu dùng jQuery thì Blog của bạn phải sử dụng thư viện jQuery, còn JavaScript thuần (vanilla JavaScript) thì không cần dùng thư viện