A simple and lightweight JavaScript library for accordion
- No dependencies. The library is written in pure JavaScript and does not require any other libraries to work.
- Simplicity and functionality. You can easily and quickly connect and use a library that implements important functionality for the accordion
- Availability. The accordion meets all accessibility rules.
- Customization with CSS. You can easily change the appearance, layout using CSS.
- Download the latest version of the library
- Connect accordion.min.css and accordion.min.js from the dist folder to the page
- Place the following markup in your HTML document:
<ul class="accordion" data-acordion="accordion">
<li class="accordion__item">
<button class="accordion__button">button</button>
<div class="accordion__collapse">
<div class="accordion__content">
<div class="accordion__body">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="accordion__button">button</button>
<div class="accordion__collapse">
<div class="accordion__content">
<div class="accordion__body">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
</li>
<li class="accordion__item">
<button class="accordion__button">button</button>
<div class="accordion__collapse">
<div class="accordion__content">
<div class="accordion__body">
Lorem ipsum dolor sit amet
</div>
</div>
</div>
</li>
</ul>You can create positioning styles only for the child element accordion__content, for example for accordion__body
- margin
- padding
- position and so on
<ul class="accordion" data-acordion="accordion">
<li class="accordion__item">
<button class="accordion__button">button</button>
<div class="accordion__collapse">
<div class="accordion__content">
<div class="accordion__body">
You can create positioning styles for the accordion__body element
</div>
</div>
</div>
</li>
</ul> data-accordion - an important data attribute through which all interaction with the plugin works. The value of this attribute must be unique to the page.
- Place the following JS code to connect the accordion:
const accordion = new Accordion('accordion');- params
speed: 1000- affects the speed of the accordion - params
turn: true- affects the operation of the accordion
const accordion = new Accordion('accordion', {
speed: 1000,
turn: true
});You can see an example of how the library works by opening the index.html file from the demo folder in the browser.
Enjoy!
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent