Package Exports
This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@js-components/accordion) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
Lightweight and accessible Accordion
Table of contents
Installation
CDN
JavaScript (add it to end of the body)
<script src="https://cdn.jsdelivr.net/npm/@js-components/accordion@1.3.0/accordion.min.js"></script>https://cdn.jsdelivr.net/npm/@js-components/accordion@1.3.0/accordion.min.jsCSS (required) for basic styling
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@js-components/accordion@1.3.0/accordion.min.css">https://cdn.jsdelivr.net/npm/@js-components/accordion@1.3.0/accordion.min.cssNPM
npm install @js-components/accordion@1.3.0Import Accordion
import JscAccordion from "@js-components/accordion";Get Started
You can use this accordion in two ways or both ways at the same time.
In first way you don't need to write any JS code, just add accordion HTML structure and that's it, you will have working accordion learn more.
Second way to create working accordions with the help of JS Class instance learn more.
HTML Way
Just add below HTML to your code and that's it, you will have working accordion.
Basic structure
<div data-jsc-accordion-container=""><!-- container -->
<div data-jsc-accordion-item=""><!-- accordion wrapper -->
<h1 class="accordion-header"><!-- needed for accessibility -->
<button class="accordion-button" data-jsc-target=""><!-- trigger -->
<span>Accordion Example #1</span>
<div class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</div>
</button>
</h1>
<div class="accordion" data-jsc-accordion=""><!-- accordion -->
<div class="accordion-content"><!-- content here -->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever
</div>
</div>
</div>
<div data-jsc-accordion-item="">
<h1 class="accordion-header">
<button class="accordion-button" data-jsc-target="">
<span>Accordion Example #2</span>
<div class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</div>
</button>
</h1>
<div class="accordion" data-jsc-accordion="">
<div class="accordion-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever
</div>
</div>
</div>
</div>If you want to customize the structure please read.
Note: if you're adding above HTML after DOMContentLoaded event is fired, you will need to use Class instance.
Accordion Instance
Basic HTML structure
<div id="accordion-container"><!-- container -->
<div class="item"><!-- accordion wrapper -->
<h1 class="accordion-header"><!-- needed for accessibility -->
<button class="accordion-button trigger"><!-- trigger -->
<span>Accordion Example #1</span>
<div class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</div>
</button>
</h1>
<div class="accordion"><!-- accordion -->
<div class="accordion-content"><!-- content here -->
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever
</div>
</div>
</div>
<div class="item">
<h1 class="accordion-header">
<button class="accordion-button trigger">
<span>Accordion Example #2</span>
<div class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" >
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
</svg>
</div>
</button>
</h1>
<div class="accordion">
<div class="accordion-content">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever
</div>
</div>
</div>
</div>Import Accordion
import JscAccordion from "@js-components/accordion";Create an instance of Accordion
const accordion = new JscAccordion({
container: "#accordion-container",
wrapper: ".item",
accordion: ".accordion",
trigger: ".trigger",
});Customize accordion structure
You can customize the HTML struture however you want just make sure every accordion is inside of a container, that's an element which has data-jsc-accordion-container data attribute or a container of class instance.
Every accordion have to wrap inside an accordion wrapper that's an element which has data-jsc-accordion-item data attribute or wrapper of class instance.
APIs
Container (required)
type: string | HTMLElement
{
// CSS selector || HTMLElement
container: '#jsc-accordion-container'
}Provide CSS selector or DOM element. This is the container where all the accordions lives.
wrapper
type: string
{
// default [data-jsc-accordion-item]
wrapper: '.item', // CSS selector
}Accordion wrapper selector. Only one accordion can be a working accordion inside a parent wrapper, you can make nested accordions in it, just add wrappers inside it (ofcourse with accordion).
accordion
type: string
{
// default [data-jsc-accordion]
accordion: '.accordion', // CSS selector
}This will be the accordion/panel which will open/expand or close/collapse.
firstElExpand
type: boolean
{
// default true
firstElExpand: true, // boolean
}Whether or not to expand first accordion initially. Default is true.
trigger
type: string
{
// default [data-jsc-target]
trigger: '.trigger', // CSS selector
}This will be the header/trigger to open/expand or close/collapse an accordion. Just make sure to wrap this element inside of any heading element for accessibility reasons.
Trigger can be skipped in an accordion struture,
because anything can be a trigger, just add this data-jsc-target='ID' attribute to any element that you want it to be a trigger and replace ID with unique CSS ID of the accordion.
Example
...
..
<div id="accordion-eg-1" class="accordion">
<div class="accordion-content">
Lorem Ipsum is...
</div>
</div>
..
...
<button data-jsc-target="accordion-eg-1">Toggle Accordion</button>duration
type: number
{
// default 300(ms)
duration: 400, // number
}Transition duration of the accordions in millisecond.
You can also add data-jsc-duration='500' attribute to the container with the value in millisecond.
Methods
expand( position: number ): boolean
position: position of accordion inside a container
returns: boolean whether succeed or not
description: open/expand accordion
accordion.expand( 1 );collapse( position: number ): boolean
position: position of accordion inside a container
returns: boolean whether succeed or not
description: close/collapse accordion
accordion.collapse( 1 );toggle( position: number ): boolean
position: position of accordion inside a container
returns: boolean whether succeed or not
description: open/expand or close/collapse accordion depends on the current state of accordion.
accordion.toggle( 1 );