Akordeon - Stylish jQuery Accordion Plugin
File Size: | 12.8 KB |
---|---|
Views Total: | 5140 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
Stylish jQuery Accordion Plugin allows you to display HTML Elements (text, images...) in an efficient accordion style.
By default , the first item is expanded on page load. You can customise your own style with its build-in APIs.
How to use it:
1. Download and include the jQuery Akordeon plugin's files on the webpage.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <link href="css/jquery.akordeon.css" rel="stylesheet"> <script src="js/jquery.akordeon.js"></script>
2. The html structure for the accordion interface.
<div class="akordeon" id="example"> <div class="akordeon-item"> <div class="akordeon-item-head"> <div class="akordeon-item-head-container"> <div class="akordeon-heading"> First Panel </div> </div> </div> <div class="akordeon-item-body"> <div class="akordeon-item-content"> <p>First Content</p> </div> </div> </div> <div class="akordeon-item"> <div class="akordeon-item-head"> <div class="akordeon-item-head-container"> <div class="akordeon-heading"> Second Panel </div> </div> </div> <div class="akordeon-item-body"> <div class="akordeon-item-content"> <p>Second Content</p> </div> </div> </div> ... </div>
3. Initialize the accordion with default settings.
$('#example').akordeon();
4. All possible options to customize the accordion.
$('#example').akordeon({ // set the expanded item expandedItem: 0, // animation speed expandSpeed: 200, // is toggled toggle: false, // expand text expandText: '–', // collapse text collapseText: '+', // shows/hides buttons buttons: true, // hidden item hiddenItem: -1, // sets the item order itemsOrder: [] });
Changelog:
2018-06-12
- Demo & Doc updated
This awesome jQuery plugin is developed by mshahbazsaleem. For more Advanced Usages, please check the demo page or visit the official website.
- Prev: None
- Next: Simple Accordion Plugin For jQuery - zAccordion