accordion-nano-expansion

Accordion Library Simple Vanilla JavaScript | nano-expansion

by

nano-expansion is a simple, clean, and configurable accordion library written in Vanilla JavaScript. Click on Headers to expand / collapse content that is divided into logical sections, much like tabs.

simple javascript accordion, accordion vanilla js, javascript accordion library, accordion logic in javascript, javascript faq accordion, custom accordion javascript

How to make use of it:

1. Import the nano-expansion’s information into the doc.

<link rel="stylesheet" href="dist/nano-expansion.css" />
<script src="dist/nano-expansion.js"></script>

2. The required HTML structure for the accordion.

<!-- expansion wrapper -->
<div class="nano-expansion-wrapper" id="myexpansion">
  <!-- expansion 1 -->
  <div class="nano-expansion">
    <div class="nano-expansion-toggle">Accordion 1</div>
    <div class="nano-expansion-content">
      <span>Sample text</span>
    </div>
  </div>
  <!-- expansion 2 -->
  <div class="nano-expansion">
    <div class="nano-expansion-toggle">Accordion 2</div>
    <div class="nano-expansion-content">
      <span>Sample text</span>
      <br>
      <span>Sample text</span>
    </div>
  </div>
  <!-- expansion 3 -->
  <div class="nano-expansion">
    <div class="nano-expansion-toggle">Accordion 3</div>
    <div class="nano-expansion-content">
      <span>Sample text</span>
      <br>
      <span>Sample text</span>
      <br>
      <span>Sample text</span>
    </div>
  </div>
</div>

3. Initialize the nano-expansion and we’re completed.

const nanoExpansion = new NanoExpansion({
      wrapper: "#myexpansion",
});

4. Customize the period of the animation.

const nanoExpansion = new NanoExpansion({
      duration: 0.2,
      wrapper: "#myexpansion",
});

5. Determine whether or not to shut different accordion panels when a new one is toggled.

const nanoExpansion = new NanoExpansion({
      wrapper: "#myexpansion",
      autoFolding: true,
});

Minimal Clean Accordion, nano-expansion Plugin/Github

See Demo And Download

Demo
Download

Official Website(mcanam): Click Here

This superior jQuery/javascript plugin is developed by mcanam. For extra Advanced Usages, please go to the official website.

Leave a Comment