Small Fast Accordion Plugin In Pure JavaScript – CFAccordion

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);