Easy Accordion

A Pure JS Accordion

Setup

So, to start using the Easy Accordion plugin in your project, you can include the script in your head/body section as shown below.


            <script src="https://cdn.jsdelivr.net/gh/farhanhalai30/easy-accordion/js/easy-accordion.min.js"></script>

Usage

Once you have included the script in your code, you can start using Easy Accordion as shown in the code below. For more list of options refer here


            <script> 

              var e_acc_obj = new EasyAccordion({ 

                target: "my-accordion",

                transitionDuration: 0.3,

                blockClass: "block",

                triggerClass: "title",

                contentClass: "content",

                triggerActiveClass: "active-title",

                contentActiveClass: "active-content"

              });

            </script>

Options

Option	Description	Type	Optional/Mandatory
target	Selector name of the target element.	String	Mandatory
blockClass	Class name for the block element	String	Mandatory
triggerClass	Class name for the trigger element (the one which is clickable).	String	Mandatory
contentClass	Class name for the content.	String	Mandatory
transitionDuration	Amount of time to transite (in seconds).	Number	Optional
triggerActiveClass	Class name for the trigger element in the active state (active means accordion is open).	String	Optional
contentActiveClass	Class name for the trigger element in the active state.	String	Optional

Examples

Example #1: Basic

A basic demo of using Easy Accordion for the first time. Click here check out in action
Example #2: Custom Active Classes

Using custom active classes for trigger & content elements. Classes get added when the accordion is in active state. Click here check out in action