Simple Smooth FAQ Accordion with jQuery and CSS - FAQ Slider

FAQ Slider is a minimal jQuery script which helps you create a FAQ interface with a smooth sliding animation that acts like a vertical accordion.

How to use it:

1. Create a FAQ interface from a list of frequently asked questions and answers.

<ul class="faq">

  <li class="q">
    <img src="img/arrow.png"> 
    Question 1
  </li>
  <li class="a">Answer 1</li>
  
  <li class="q">
    <img src="img/arrow.png"> 
    Question 2
  </li>
  <li class="a">Answer 2</li>

  <li class="q">
    <img src="img/arrow.png"> 
    Question 3
  </li>
  <li class="a">Answer 3</li>

</ul>

2. Add your own CSS styles to the FAQ accordion.

.faq li { padding: 20px; }

.faq li.q {
  background: #4FC2E;
  font-weight: bold;
  font-size: 120%;
  border-bottom: 1px #ddd solid;
  cursor: pointer;
}

.faq li.a {
  background: #3BB0D6;
  display: none;
  color:#fff;
}

3. Include jQuery library at the bottom of your FAQ page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>

4. The core JavaScript to enable the FAQ accordion.

// Accordian Action
var action = 'click';
var speed = "500";


$(document).ready(function(){

// Question handler
  $('li.q').on(action, function(){

    // gets next element
    // opens .a of selected question
    $(this).next().slideToggle(speed)
    
    // selects all other answers and slides up any open answer
    .siblings('li.a').slideUp();
  
    // Grab img from clicked question
    var img = $(this).children('img');

    // remove Rotate class from all images except the active
    $('img').not(img).removeClass('rotate');

    // toggle rotate class
    img.toggleClass('rotate');

  });

});

5. Don't forget to add the following CSS3 snippet into your CSS. This will rotate the arrow icon as you toggle a FAQ panel.

.rotate {
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}

---

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