JavaScript Library for Nested Accordions using Custom Elements

Vanilla Accordions is an accordion library written in old vanilla JavaScript. There are no dependencies, no jQuery needed, and completely not framework dependent. It uses web components to create a “native” accordion that just works.

Features:

  • Easy to use syntax – just insert js and css files into your project, add them to your HTML page, and use <accordion-element> to create an accordion.
  • Easy to customize – Styles are provided in both less and CSS, with some pre-built CSS variables to help customize your accordions.
  • Small – Combined, the mini-sources are just over 1.5KB when gZipped.
  • Supports nested accordions and accordion groups – accordions can be grouped using the dataset attribute so that only those in the same group are closed when one is opened, allowing nested accordions.
  • Automatic update of accordion title and body – Using chapter setters, the title and contents of the accordion can be updated without having to touch the dom, making changes to the accordion as simple as a single line of code.

How to make use of it:

1. Import the Vanilla-Accordions into your doc.

<link rel="stylesheet" href="build/accordion.min.css" />
<script src="./build/AccordionElement.min.js" type="module"></script>

2. Add the <accordion-element /> element to the web page and outline the accordion title within the data-title attribute.

<accordion-element data-title="Basic Accordion - Click Me!">
  <h2>A Basic Accordion</h2>
</accordion-element>

3. Determine whether to open the accordion on the web 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, simply put all of theĀ <accordion-element /> parts within 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 utilizing 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>

Smooth Nested Accordion Web Component, accordion vanilla js Plugin/Github, nested accordion, nested accordion html, nested accordion jquery, nested accordion design


See Demo And Download

Official Website(ploiu): Click Here

This superior jQuery/javascript plugin is developed by ploiu. For extra advanced usage, please go to the official website.

Share