Smooth Nested Accordion Web Component – Vanilla-Accordions

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>