Simple Smooth FAQ Accordion with jQuery and CSS - FAQ Slider

File Size: 7.19 KB
Views Total: 39841
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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 class="a">Answer 1</li>
  <li class="q">
    <img src="img/arrow.png"> 
    Question 2
  <li class="a">Answer 2</li>

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


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;

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

<script src="//"></script>

4. The core JavaScript to enable the FAQ accordion.

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


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

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

    // remove Rotate class from all images except the active

    // toggle rotate class



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.