Author: | pieisdead |
---|---|
Views Total: | 570 views |
Official Page: | Go to website |
Last Update: | July 9, 2019 |
License: | MIT |
Preview:

Description:
CFAccordion is a tiny, performant, customizable accordion/content toggle plugin implemented in pure JavaScript.
How to use it:
Add the CFAccordion plugin’s JavaScript and Stylesheet to the page.
<link href="cfaccordion-style.css" rel="stylesheet" /> <script src="CFAccordion.js"></script>
Create accordion headers and panels following the HTML structure like these:
<div id="myAccordion" class="cf-accordion"> <h3 >My Accordion Header 1</h3> <div> My Accordion Content 1 </div> <h3 >My Accordion Header 2</h3> <div> My Accordion Content 2 </div> <h3 >My Accordion Header 3</h3> <div> My Accordion Content 3 </div> </div>
Initialize the accordion and specify the toggle mode you’d like to use:
- dynamic: Only one panel is allowed to open at a time
- normal: allows the user to open multiple panels at a time
var myAccordion = new CFAccordion("myAccordion", 'dynamic'); var myAccordion = new CFAccordion('myAccordion', 'normal');
Expand/collapse all accordion panels.
myAccordion.collapseAll('myAccordion'); myAccordion.expandAll();
Specify an accordion panel that opens automatically after initialization.
myAccordion.initialOpen(1);