Simple Smooth FAQ Accordion with jQuery and CSS - FAQ Slider
File Size: | 7.19 KB |
---|---|
Views Total: | 39700 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.