FAQ Accordion From jQuery Plugin is a lightweight and user-friendly solution for displaying frequently asked questions on your web page. With its clean and compact design, it allows you to present concise answers in an organized accordion-style format. The plugin offers customization options, making it easy to adapt to your website’s aesthetics. By utilizing this minimal FAQ UI, you can enhance user experience and provide quick access to important information.
How to use :
Table of Contents
Add the latest jQuery library.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="jQueryFAQAccordion.js"></script>
Add questions and answers to the accordion.
<div class="question">
<h4>Question 1</h4>
<div class="faqAnswer">
Answer 1
</div>
</div>
<div class="question">
<h4>Question 2</h4>
<div class="faqAnswer">
Answer 2
</div>
</div>
<div class="question">
<h4>Question 3</h4>
<div class="faqAnswer">
Answer 3
</div>
</div>
Style the FAQ accordion.
.question {
padding: 10px;
border-radius: 6px;
background: white;
transition: all 0.5s ease;
margin-bottom: 15px;
font-size: 14px;
}
.question:hover {
background-color: #0695dd;
}
.question.open {
-webkit-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.13);
-moz-box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.13);
box-shadow: 0px 0px 17px -1px rgba(0,0,0,0.13);
}
.question .faqAnswer {
display: none;
padding: 20px 10px;
line-height: 28px;
color: rgba(0,0,0,0.6);
font-size: 17px;
}
.question.open:hover {
background: white;
}
.question h4 {
border-radius: 6px;
margin: 0px;
padding: 10px;
color: black;
font-weight: 400;
font-size: 20px;
cursor: pointer;
}
.question h4.open {
border-radius: 6px;
margin: 0px;
color: white;
background-color: #0695dd;
cursor: pointer;
}
.question:hover h4 {
color: white;
}
Add main jQuery script to enable the FAQ accordion.
$(document).ready(function() {
// When <h4> tag is clicked
$(".question h4").click(function() {
// Check to see if there is a toggled question and close it.
if ($('.faqAnswer').is(':visible')) {
$(".faqAnswer").slideUp(300);
$('.question').removeClass("open");
$('h4').removeClass("open");
console.log('verificam...');
}
if ($(this).next(".faqAnswer").is(':visible')) {
// If user clicks on an open question, closed it. Remove css classes.
$(this).next(".faqAnswer").slideUp(300);
$(this).parent().removeClass("open");
$(this).removeClass("open");
}
else {
// If user clicks on a question with an hidden answer, slideDown the answer and apply css classes.
$(this).next(".faqAnswer").slideDown(300);
$(this).parent().addClass('open');
$(this).addClass('open');
}
});
});
Done
Thanks for make jQuery plugin is developed by neluttu For more Helpfull for users, please check the demo page or visit the official website.
