FAQ Accordion With Plus/Minus Icons - jquery-accordion.js

A small yet configurable FAQ accordion jQuery plugin that allows your visitors to expand and collapse frequently asked questions/answers with Plus/Minus icons.

How to use it:

1. Load the Font Awesome iconic font for the Plus/Minus icons. OPTIONAL.

<link rel="stylesheet" href="/path/to/cdn/font-awesome/VERSION/css/all.min.css" />

2. The required HTML structure for the FAQ accordion.

<div class="faq">
  <div class="item">
    <div class="question">
      <h4>Question 1</h4>
      <!-- replace plus/minus icons here -->
      <i class="fa fa-plus"></i>
      <i class="fa fa-minus"></i>
    </div>
    <div class="answer">Answer 1</div>
  </div>
  <div class="item">
    <div class="question">
      <h4>Question 2</h4>
      <i class="fa fa-plus"></i>
      <i class="fa fa-minus"></i>
    </div>
    <div class="answer">Answer 1</div>
  </div>
  <div class="item">
    <div class="question">
      <h4>Question 3</h4>
      <i class="fa fa-plus"></i>
      <i class="fa fa-minus"></i>
    </div>
    <div class="answer">Answer 1</div>
  </div>
  ...
</div>

3. Load the JavaScript file jquery-accordion.js after jQuery.

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

4. Call the function accordion on the top container to initialize the FAQ system.

$(".faq").accordion();

5. The default CSS selectors.

$(".faq").accordion({
  questionClass: '.question',
  answerClass: '.answer',
  itemClass: '.item'
});

6. Apply your own CSS styles as follows:

.faq {
  width: 80%;
  border: 1px solid #222;
}

.item .question {
  padding: 15px;
  background: #C0392B;
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}

.item .question h4 {
  margin: 0;
}

.item .question .fa.fa-minus {
  display: none;
}

.item.jquery-accordion-active .fa.fa-minus {
  display: block;
}

.item.jquery-accordion-active .fa.fa-plus {
  display: none;
}

.item .answer {
  padding: 15px;
  display: none;
}

7. Determine whether to close other panels when an answer is opened. Default: true.

$(".faq").accordion({
  closeOthers: true
});

8. Specify the animation speed. Default: 200ms.

$(".faq").accordion({
  animationDuration: 500
});

9. Event handlers.

$(".faq").accordion()
.on('jqueryaccordioninit', function(){
  // on init
})
.on('jqueryaccordiontoggle', function(){
  // before toggle
})
.on('jqueryaccordiontoggled', function(){
  // after toggle
})
.on('jqueryaccordiondestory', function(){
  // after destroy
})

---

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