Super-simple-accordion NPM

Super simple, accessible, content accordion.

The instructions below are for installing Super Simple Accordion with NPM and using your favorite bundler to import.

Install

To add Super Simple Accordion using NPM

$ npm install super-simple-accordion

Usage

Step 1. Include CSS

You will need to import the css into your project entry file.

import 'super-simple-accordions/dist/css/accordions.min.css';

Step 2. Include markup

In your project include the following markup.

<div class="accordion">
 <h2 class="accordion__title">
   What is an accordion?
 </h2>
 <div class="accordion__panel">
    <div class="accordion__content">
    <p>
      Accordions are useful when you want to toggle between hiding and showing large amounts of content.
    </p>
    <p>
      Look at all of this beautiful content!
    </p>
    <p>
      It all seems so gratuitous but ohhhhh so needed. I love hearing myself talk (type?)!
    </p>
    </div>
 </div>
</div>

<div class="accordion">
 <h2 class="accordion__title">
   Who is involved?
 </h2>
 <div class="accordion__panel">
   <div class="accordion__content">
    <p>Accordions are useful when you want to toggle between hiding and showing large amounts of content.</p>
   </div>
 </div>
</div>

This is just some example markup and can be changed to fit your needs. You will just need these four elements:

A container for your accordion with the class .accordion.
A header with the class .accordion__title.
A container for the content with the class .accordion__panel
Inside of the .accordion__panel an element with the class .accordion__content

If you want an accordion to be opened by default add the following data attribute in the outer accordion container.

<div class="accordion" data-expanded="true">

And to group accordions so the expand all button works just for the group, wrap each group in a div with the class .accordion__grouped.

<div class="accordion__grouped">
  <div class="accordion">
   <h2 class="accordion__title">
    What is an accordion?
   </h2>
   <div class="accordion__panel">
     <div class="accordion__content">
       <p>
         Accordions are useful when you want to toggle between hiding and showing large amounts of content. Great for FAQs!
       </p>
       <p>
         Look at all of this beautiful content!
       </p>
       <p>
         It all seems so gratuitous but ohhhhh so needed. I love hearing myself talk (type?)!
       </p>
     </div>
   </div>
   </div>

   <div class="accordion">
   <h2 class="accordion__title">
     Who is involved?
   </h2>
   <div class="accordion__panel">
     <div class="accordion__content">
      <p>Accordions are useful when you want to toggle between hiding and showing large amounts of content.</p>
     </div>
   </div>
  </div>
</div>

This will add an expand all button to each group. Once accordions are grouped the global expand all button will not be placed in the DOM.

One last feature is the ability to set your own toggle button markup. In your options set toggleBtnSelfMarkup to true. Just make sure to add the toggleBtnClass to your button. The default is .accordion__toggle.

  <div class="accordion">
   <h2 class="accordion__title">
     <button class="accordion__toggle">Who is involved?</button>
   </h2>
    <div class="accordion__panel">
       <div class="accordion__content">
        <p>Accordions are useful when you want to toggle between hiding and showing large amounts of content.</p>
       </div>
     </div>
    </div>
  </div>

Step 3. Import the package

Below are the default options available. Only include the ones you plan to change. If you do change the class names makes sure to update your CSS accordingly.

In your entry file:

import {SuperSimpleAccordions} from 'super-simple-accordions';

if (document.querySelector(".accordion")) {
    const accordions = new SuperSimpleAccordions('.accordion', {
      // ALL available options and their defaults

      // Accordion parts classes
       accordionClass: 'accordion',
       headerClass: 'accordion__title',
       toggleBtnClass: 'accordion__toggle',
       contentClass: 'accordion__content',
       panelClass: 'accordion__panel',

      //Whether to add the hidden attribute to the accordion content
      hidden: true,

      // Toggle all other accordions closed when one is opened
       toggleOthers: false,
      // If true, the toggle button is already in the markup
       toggleBtnSelfMarkup: false,

       // Icons
       icons: true, // true or false
       iconsClass: 'accordion__icon',
       iconsSymbol: 'plus-minus', // arrow or plus-minus
       iconsPosition: 'left', // right or left

       // Expand All features
       expandAllBtn: true, // true or false
       expandAllClass: 'accordion__toggle-all',
       expandAllContainerClass: 'accordion__toggle-all-container',
       expandSelectClass: 'expanded',
       expandAllOpenText: 'Expand All',
       expandAllCloseText: 'Collapse All',
       expanded: false, // accordions collapsed by default but can be expanded

       //accordion groups
       groupedClass: 'accordion__grouped',
       groupedExpandAllClass: 'accordion__toggle-all-grouped',
    })
  }