This time I will share jQuery Plugin and tutorial about Simple Smooth FAQ Accordion with jQuery and CSS – FAQ Slider, hope it will help you in programming stack.
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.
04 |
<img src="img/arrow.png"> |
07 |
<li class="a">Answer 1</li> |
10 |
<img src="img/arrow.png"> |
13 |
<li class="a">Answer 2</li> |
16 |
<img src="img/arrow.png"> |
19 |
<li class="a">Answer 3</li> |
2. Add your own CSS styles to the FAQ accordion.
01 |
.faq li { padding: 20px; } |
07 |
border-bottom: 1px #ddd solid; |
3. Include jQuery library at the bottom of your FAQ page.
1 |
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script> |
4. The core JavaScript to enable the FAQ accordion.
06 |
$(document).ready(function(){ |
09 |
$('li.q').on(action, function(){ |
13 |
$(this).next().slideToggle(speed) |
16 |
.siblings('li.a').slideUp(); |
19 |
var img = $(this).children('img'); |
22 |
$('img').not(img).removeClass('rotate'); |
25 |
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.
2 |
-moz-transform: rotate(90deg); |
3 |
-webkit-transform: rotate(90deg); |
4 |
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.
