Smooth FAQ Accordion Plugin In jQuery

Accordions
minimal-faq-ui
File Size: 2.5 KB
Views Total: 979 views
Last Update:March 10, 2023
Publish Date: January 01, 2023
Official Website: Go to website
License: MIT
Plugin Author: neluttu
Demo    Download

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 :

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.
List Of Version :

Mady

Mady Schaferhoff is an expert jQuery script at jQuerypost. He offers web development services to clients globally. He also loves sharing Html,CSS, jQuery knowledge through blog posts like this one.