Minimal Clean Accordion JavaScript Library – nano-expansion

nano-expansion is a minimal, clean, configurable accordion library written in vanilla JavaScript.

How to use it:

1. Import the nano-expansion’s files into the document.

<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 done.

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

4. Customize the duration of the animation. Default: 0.2 seconds.

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

5. Determine whether to close other accordion panels when a new one is toggled. Default: false.

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