Light weight and Simple Accordion

Usage

CDN:

https://cdn.jsdelivr.net/gh/abhy12/JS-Components@master/dist/accordion/accordion.min.js

Get started

After linking the accordion file you can use accordion with HTML way or class based way (either way is good but class based way give you more control over "accordion").

HTML Way

HTML Example 1

Basic structure

<!-- Accordion wrapper -->
<div class="jsc-accordion">
   <!-- Always wrap button to heading tag for accessibility -->
   <h1><button data-jsc-target="YOUR-ID">Lorem ipsum dolor sit amet.</button></h1>
   <!-- Accordion -->
   <div id="YOUR-ID" data-jsc-accCon="true">
      <!-- Your content -->
   </div>
</div>

just replace "YOUR-ID" with your own same unique html ID(without "#") and that's it eveything will be working fine now 🎉.

Change button text on collapse or expend

<h1>
   <button data-collapsetext="collapse" data-expendtext="Expend">Collapse</button>
</h1>

Read More
Add data-jsc-target dataset with the value of accordion id to any button you like to trigger accordion.
If you add data-jsc-accCon="" dataset with the value of "false" to the accordion then the accordion will not work.

HTML Example 2

In this example you don't need to add any html ID to the container or in the button

<div class="jsc-accordion">
   <!-- Always wrap button to heading tag for accessibility -->
   <h1><button data-jsc-target="">Lorem ipsum dolor sit amet.</button></h1>
   <!-- Accordion content container -->
   <div data-jsc-accCon="true">
      <!-- Your content -->
   </div>
</div>

The "jsc-accordion" element has to wrap the whole accordion and the button this is important.
Note: The downside of not adding ID to this is that it will not work perfectly in nested accordion.

Class based way

Example HTML structure

<button id="btn">Lorem ipsum dolor sit amet.</button>
<div class="new-accordion">
   <!-- Your content -->
</div>

Create an instance of Accordion

const newAccordion = new JscAccordion({	
   container: ".new-accordion",
   button: "#btn",
   collapsed: true, ///initial default

   ///change button text on collapse or expend
   collapseText: "Collapse",
   expendText: "Expend",
});

Note: you can use any document query for selecting an accordion container but if that accordion container don't have an existing ID then this Accordion instance will generate a new ID for that accordion container.

APIs

{
   ///CSS selector or DOM element
   container: ".new-accordion"
}

{
   ///CSS selector or DOM element(s) 
   ///and [] of CSS selectors
   button: "#acc-btn"
}

{
   //boolean
   //default "true"
   collapsed: true
}

{
   //string
   collapseText: "Expend"
}

{
   //string
   expendText: 'Collapse'
}

Methods

enable 

disable 

toggle