Easy Accordion
Accordion plugin written purely in JavaScript.
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">
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
Options
Below is the list of options available.
| 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
-
Basic Example
A basic demo of using Easy Accordion for the first time.
Click here check out in action -
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
Browser Support
All browsers (Chrome, Mozilla, Safari) & in Internet Explorer upto IE9.
7 Dec 20, 2022
4 Dec 18, 2022
600 Dec 8, 2022
44 Jul 6, 2022
1 Dec 16, 2022
4 Dec 8, 2022
59 Oct 8, 2022
7.1k Jan 2, 2023
56 Dec 4, 2022