Small Fast Accordion Plugin In Pure JavaScript – CFAccordion

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

Preview:

Small Fast Accordion Plugin In Pure JavaScript – CFAccordion

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

You Might Be Interested In:


Leave a Reply