Small Fast Accordion Plugin In Pure JavaScript – CFAccordion

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


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>
    My Accordion Content 1
  <h3 >My Accordion Header 2</h3>
    My Accordion Content 2
  <h3 >My Accordion Header 3</h3>
    My Accordion Content 3

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.


Specify an accordion panel that opens automatically after initialization.


You Might Be Interested In:

Leave a Reply