Very light and simple module. With the module you can create accordion on your website, useful for creating FAQ lists.
v2.2.6
On production use files (JS and CSS) only from dist/ folder
npm install accordion-js
<link rel="stylesheet" href="accordion.min.css">
<script src="accordion.min.js"></script> <div class="accordion-container">
<div class="ac">
<a href="#" class="ac-q">Lorem ipsum</a>
<div class="ac-a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
</div>
</div>
<div class="ac">
<a href="#" class="ac-q">Lorem ipsum</a>
<div class="ac-a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
</div>
</div>
<div class="ac">
<a href="#" class="ac-q">Lorem ipsum</a>
<div class="ac-a">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis lacinia nibh.</p>
</div>
</div>
</div><script>
var accordion = new Accordion('accordion-container');
</script>new Accordion(container, options)
- container - string (required), selector of accordion container
- options - object (optional), accordion options
You can initialize more than one accordion per page.
<script>
// Default options
var accordion = new Accordion('.container-first');
// User options
var accordion = new Accordion('.container-second', {
duration: 500,
showFirst: true
});
</script>| Option | Type | Default value | Description |
|---|---|---|---|
| duration | number | 600 | Animation duration in ms |
| closeOthers | boolean | true | Show only one element at the same time |
| showFirst | boolean | false | Always show first element |
| elClass | string | 'ac' | Element class |
| qClass | string | 'ac-q' | Question class |
| aClass | string | 'ac-a' | Answer class |
| targetClass | string | 'ac-target' | Target class [Read more below] |
targetClass - If an element has the targetClass class and is inside box with qClass class, then when you click on it, the list will be expanded. Otherwise expanded will not take place and clicked element will take you to the top of the page.