jQuery Accordion is a lightweight jQuery plugin used to generate simple accordion with a bit configuration or code. It is fully responsive, CSS powered and supports to all major browsers.
Features:
- Easy to implement and user-friendly.
- Multi-level supported.
- Easy customizable with CSS.
- Supports single and multi open.
- Supports IE9+ and modern browsers.
How to use it:
1. Insert the CSS jquery.accordion.css in the header.
2. Include the Javascript jquery.accordion.js at the bottom of the web page.
3. Add the basic HTML to the page, you can implement multiple accordions within the same page with the same class.
<div data-accordion-group> <div class="accordion" data-accordion> <div data-control>Control</div> <div data-content> <div>Row</div> <div>Row</div> <div>Row</div> </div> </div> <div class="accordion" data-accordion> <div data-control>Control</div> <div data-content> <div>Row</div> <div>Row</div> <div>Row</div> </div> </div> </div>4. Initialize the plugin and we’re ready to go.
$('.accordion').accordion({ "transitionSpeed": 400 });Multiple useage within same page with different parameters
1. Basic HTML structure for multiple useage
<div id="single-open" data-accordion-group> <div data-accordion> <div data-control>Heading - 1</div> <div data-content> <p>Content - 1</p> </div> </div> <div data-accordion> <div data-control>Heading - 2</div> <div data-content> <p>Content - 2</p> </div> </div> </div>2. Basic script for multiple useage
$('#single-open [data-accordion]').accordion();Plugin’s default configuration options:
{ transitionSpeed: 300, transitionEasing: 'ease', controlElement: '[data-control]', contentElement: '[data-content]', groupElement: '[data-accordion-group]', singleOpen: true }Originally published at https://www.jqueryhub.com on June 29, 2019.
