JSA JavaScript Accordion

Developed by Homero Cavazos

This Accordion is based on The Description List Element.

Download 
npm i @homiehomes/jsa

CDN

// JavaScript
https://unpkg.com/@homiehomes/jsa@1.0.1/jsa.min.js

// CSS - Core
https://unpkg.com/@homiehomes/jsa@1.0.1/dist/css/jsa.core.min.css

// CSS - Theme Basic
https://unpkg.com/@homiehomes/jsa@1.0.1/dist/css/jsa.theme-basic.min.css

// CSS - Theme Round
https://unpkg.com/@homiehomes/jsa@1.0.1/dist/css/jsa.theme-round.min.css

Demo

Title One
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas voluptates, necessitatibus amet architecto illum placeat laudantium animi numquam officia eum, eligendi iste similique iusto natus unde. Enim est earum in.
Title Two
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas voluptates, necessitatibus amet architecto illum placeat laudantium animi numquam officia eum, eligendi iste similique iusto natus unde. Enim est earum in.
Title Three
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Voluptas voluptates, necessitatibus amet architecto illum placeat laudantium animi numquam officia eum, eligendi iste similique iusto natus unde. Enim est earum in. 
<dl>
  
  <dt>Term</dt>
  <dd>Definition</dd>
  
  <dt>Term</dt>
  <dd>Definition</dd>
  
  <dt>Term</dt>
  <dd>Definition</dd>
  
</dl>
Bare Minimum

Usage

The accordion's markup is based on definition list. The goal is to keep the markup simple to maintain. The application will fill in the necessary attributes. 

<dl class="jsa">

  <dt><a href="#">Title One</a></dt>
  <dd>Lorem ipsum dolor sit.</dd>

  <dt><a href="#">Title Two</a></dt>
  <dd>Lorem ipsum dolor sit.</dd>

  <dt><a href="#">Title Three</a></dt>
  <dd>Lorem ipsum dolor sit.</dd>

</dl>
Step 1

HTML - Required

To activate the accordion add "jsa" class to the <dl> element. The <dt> element needs a child <a> tag for the application to trigger the corresponding definition. The example below is all the markup needed in order to function. 

dt {
  display: flex;
  align-items: center;
  position: relative;
}
dd {
  max-height: 0;
  overflow: hidden;
  background-color: #ffffff;
  padding: 0;
  margin: 0;
}
dd.show {
  padding: 1em;
  max-height: 100%;
}
Step 2

CSS - Required

In order for the collapse and show to work you will need this basic CSS. 

// Load the JSA library
<script src="jsa.min.js"></script>

// Instantiate
var example = new jsa();
var example2 = new jsa();

// Default with .jsa class
example.init();


// Custom selector
example.init('#foo'); // <dl id="foo">
example2.init('.bar'); // <dl class="bar">
Step 3

JavaScript - Required

The '.init()' must be called in order to convert the markup to an accordion. The function without any parameters will look for the <dl class="jsa">. You may choose a different selector name as long as you specify it in the init function as the first argument. This is useful when creating multiple accordions on a page. Each instance must be unique.

Options

You can override the default controls by passing an object as the second argument. 

example.init( '#foo', { options } );

{ 
  dt: "dt h3",
  openFirst: false, // Open first drawer on load
  openAll: false, // Open all on load
  toggle: false // Toggle open/close drawer
}

Example

This is at it's most basic form you can use as a boilerplate or for reference. 

<html lang="en">
<head>

  <style>
    dt {
      display: flex;
      align-items: center;
      position: relative;
    }
    dd {
      max-height: 0;
      overflow: hidden;
      background-color: #ffffff;
      padding: 0;
      margin: 0;
    }
    dd.show {
      padding: 1em;
      max-height: 100%;
    }
  </style>

  <!-- Add Theme styles or your own -->
  <link rel="stylesheet" href="https://unpkg.com/@homiehomes/jsa@1.0.1/dist/css/jsa.theme-basic.min.css" />

</head>
  <body>

    <dl class="jsa">

      <dt><a href="#">Title One</a></dt>
      <dd>Lorem ipsum dolor sit.</dd>

      <dt><a href="#">Title Two</a></dt>
      <dd>Lorem ipsum dolor sit.</dd>

      <dt><a href="#">Title Three</a></dt>
      <dd>Lorem ipsum dolor sit.</dd>

    </dl>

  <script type="module">
  
    import { jsa } from 'https://unpkg.com/@homiehomes/jsa@1.0.1/jsa.min.js';


    var example = new jsa()

    example.init();

  </script>
  
 </body>

</html>