@js-components/accordion v1.2.2

Light weight and Simple Accordion

Intro

You can use this Accordion in two ways or both ways at same time.

First way is HTML Way which can "automatically convert your existing HTML to working Accordion" for this to work you have to follow certain html "structure", look HTML Way to find out more.

Second way to create anything a Accordion see Class based Accordion.

Installation

CDN

<script src="https://cdn.jsdelivr.net/npm/@js-components/accordion@1.2/accordion.min.js"></script>

NPM

npm install @js-components/accordion@1.2

Import Accordion

import JscAccordion from "@js-components/accordion";

HTML Way

It will convert your existing HTML to working "Accordion".
If you have not installed see installation section

Basic structure

<div data-jsc-accordion-container=""><!-- container -->
   <div data-jsc-accordion-item=""><!-- accordion item wrapper -->
      <h1 class="accordion-header">
         <button class="accordion-button" data-jsc-target="">Accordion Example #1</button><!-- trigger -->
      </h1>
      <div data-jsc-accordion=""><!-- accordion -->
         <div class="accordion-content"><!-- content here -->
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever
         </div>
      </div>
   </div>
   <div data-jsc-accordion-item="">
      <h1 class="accordion-header">
         <button class="accordion-button" data-jsc-target="">Accordion Example #2</button>
      </h1>
      <div data-jsc-accordion="">
         <div class="accordion-content">
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
            industry's standard dummy text ever
         </div>
      </div>
   </div>
</div>

Change button text on collapse or expend state

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

And that's it eveything will be working fine now 🎉.

Additional Notes:

• You can add data-jsc-target dataset with the value of accordion id to any button you like to trigger the accordion.
• If you add data-jsc-accordion="" dataset with the value of "false" to the accordion then the accordion will not work.
• Add data-jsc-preventDefault="" dataset to your trigger(s) or button(s) a value of false or empty if you want it to preventDefault or not.

Class based way

If you have not installed see installation section

Example HTML structure

<div id="accordion-container"><!-- container -->
   <div class="item"><!-- accordion item wrapper -->
      <h1><button class="trigger">Toggle Accordion</button></h1><!-- trigger -->
      <div class="accordion"><!-- accordion -->
         <!-- content here -->
      </div>
   </div>
   <div class="item"><!-- accordion item wrapper -->
      <h1><button class="trigger">Toggle Accordion</button></h1><!-- trigger -->
      <div class="accordion"><!-- accordion -->
         <!-- content here -->
      </div>
   </div>
</div>

Create an instance of Accordion

const newAccordion = new JscAccordion({	
   container: "#accordion-container",
   containerIsAccordion: false,  ///for backward compatibility
   accordionElWrapper: ".item",
   accordionEl: ".accordion",
   button: ".trigger",
});

APIs

{
   ///(optional)
   ///boolean
   ///default "true"
   containerIsAccordion: false
}

{
   ///(optional)
   ///string
   accordionElWrapper: ".accordion-item"
}

{
   ///(required*)
   ///string
   accordionEl: ".accordion"
}

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

Note: you can use either multiple values of DOM query string selector or DOM elements nodes, not both at same time as button property value.

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