Minimal FAQ Accordion In jQuery

File Size: 4.44 KB
Views Total: 195
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Minimal FAQ Accordion In jQuery

A simple and jQuery-based accordion UI for organizing and presenting FAQ (Frequently Asked Questions) on your website.

You can customize the appearance of the accordion by changing the CSS styles, and you can even add additional functionality by modifying the script.

How to use it:

1. Add questions and answers to the FAQ 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>
...

2. 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;
}

3. Load the latest jQuery library in the document.

<script src="/path/to/cdn/jquery.min.js"></script>

4. The 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');
      }
  });
});

Changelog:

2023-01-05

  • Removed console.log()

This awesome jQuery plugin is developed by neluttu. For more Advanced Usages, please check the demo page or visit the official website.