Author: | ploiu |
---|---|
Views Total: | 403 views |
Official Page: | Go to website |
Last Update: | August 5, 2021 |
License: | MIT |
Preview:

Description:
A tiny, easy, and fast vanilla JavaScript library for creating a smooth, nested accordion web component using Custom Elements.
How to use it:
1. Import the Vanilla-Accordions into your document.
<link rel=”stylesheet” href=”build/accordion.min.css” />
<script src=”./build/AccordionElement.min.js” type=”module”></script>
2. Add the <accordion-element />
component to the page and define the accordion title in the data-title
attribute. That’s it.
<accordion-element data-title="Basic Accordion - Click Me!"> <h2>A Basic Accordion</h2> </accordion-element>
3. Determine whether to open the accordion on page load.
<accordion-element data-title="Basic Accordion - Click Me!" data-open> <h2>A Basic Accordion</h2> </accordion-element>
4. To create an accordion set, just put all the <accordion-element />
components in the <accordion-fan />
<accordion-fan> <accordion-element data-title="Accordion One"> <h2>Accordion 1</h2> </accordion-element> <accordion-element data-title="Accordion Two"> <h2>Accordion 2</h2> </accordion-element> <accordion-element data-title="Accordion Three"> <h2>Accordion 3</h2> </accordion-element> </accordion-fan>
5. Group your accordions using the data-group
attribute. Useful for nested accordions.
<accordion-element data-title="Nested Accordions Here"> <accordion-element data-group="nested" data-title="Nested Accordion 1"> <p>Nested Accordion 1</p> </accordion-element> <accordion-element data-group="nested" data-title="Nested Accordion 2"> <p>Nested Accordion 2</p> </accordion-element> <accordion-element data-group="nested" data-title="Nested Accordion 3"> <p>Nested Accordion 3</p> </accordion-element> </accordion-element>