Vanilla Accordion — Lightweight, dependency-free, ADA-friendly

A tiny, dependency-free Vanilla JavaScript accordion that's accessible by default. Automatically sets ARIA attributes, adds keyboard navigation and can generate JSON-LD schema for SEO. Easy to style and customize.

npm i @homiehomes/jsa

Themes at a glance

Default - No styles applied.
Core - No external CSS needed.
Minimal - Requires jsa-themes.min.css or _jsa.theme-minimal.scss.
Accordion - Requires jsa-themes.min.css or _jsa.theme-accordion.scss.

Getting Started: Bare Minimum HTML
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.

A trigger element (usually an anchor, button or H1-H6) is required inside the <dt> element. The content to be revealed should be wrapped inside the <dd> element.

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

Bare Minimum JavaScript
To instantiate the accordion, you need to include the JavaScript file and create a new instance of the accordion class.

The <dl> element should have the class jsa applied to it.

For multiple instances of the accordion on the same page, you need to declare a unique selector to the instance. For example, #jsa-menu, .jsa-accordion2 class on each <dl> element.

import { jsa } from '@homiehomes/jsa'; new jsa(); // Additional accordion new jsa( { dl: '#jsa-menu', } );
Options Customize the Accordion: JSA 2.0
JSA by default only has inline CSS for expand/collapse functionality. See Default Accordion section

The <a> tag is recommended because it is semantically appropriate for links that open and close content and is widely recognized by users and assistive technologies.

However, if you prefer to use a different element (like a <button> or heading tags), you can specify that using the dt option. <dt><h2>Title</h2></dt> {dt: 'dt h2'}

All options are optional. The defaults are shown below.

new jsa( { dl: ".jsa", dt: "dt a", dd: "dd", theme: '', openFirst: false, openAll: false, closeAll: null, closeOthers: false, animate: false, prefix: "" icons: ['', ''], iconClass: 'jsa-icon', termPadding: '0.5em 1em 0.5em 0', schema: false, schemaType: 'FAQPage', termBg: 'transparent' : '', termBgActive: 'black', termColor: '#719456', termColorActive: '#fff', borders: true, borderColor: '#719456', darkmode: false, debug: false, } );

Option Type Default Availability Description

dl string '.jsa' ✓ The selector for the accordion container. This should be a <dl> element.

dt string 'dt a' ✓ The trigger element for the accordion. This should be a <dt> element.

theme string 'core' ✓ The theme to use for the accordion. Options are 'core', 'minimal', 'accordion', or '' (no theme).

openFirst boolean false ✓ If true, the first item will be opened by default.

openAll boolean false ✓ If true, all items will be opened by default.

closeAll string null ✓ The selector for a button or link that will close all items when clicked.

closeOthers boolean false ✓ If true, opening one item will close all others.

animate boolean false ✓ If true, animate the opening and closing of items.

icons array [] Core An array of two strings representing the icons for the closed and open states. Can be inline SVG, an <img> element, or emojis.

iconClass string 'jsa-icon' Core The class to apply to the icon element.

termPadding string '0.5em 1em' Core The padding to apply to the term element.

schema boolean false ✓ If true, JSON-LD schema will be generated for SEO.

schemaType string 'FAQPage' ✓ The type of schema to generate. Options are 'FAQPage' or 'Article'.

termBg string 'transparent' Core
darkmode: true The background color for the term element. Can be a color name, hex, or rgba value.

termBgActive string 'black' Core
darkmode: true The background color for the "Active" term element. Can be a color name, hex, or rgba value.

termColor string '#719456' Core
darkmode: true The text color for the term element. Can be a color name, hex, or rgba value.

termColorActive string '#fff' Core
darkmode: true The text color for the "Active" term element. Can be a color name, hex, or rgba value.

borders boolean true Core If true, borders will be added between terms.

borderColor string '#719456' Core
darkmode: true The border color between terms. Can be a color name, hex, or rgba value.

darkmode boolean false Core
darkmode: true If true, dark mode styles will be applied.

debug boolean false ✓ If true, logs the accordion configuration.

Option	Type	Default	Availability	Description
`dl`	string	`'.jsa'`	✓	The selector for the accordion container. This should be a `<dl>` element.
`dt`	string	`'dt a'`	✓	The trigger element for the accordion. This should be a `<dt>` element.
`theme`	string	`'core'`	✓	The theme to use for the accordion. Options are `'core'`, `'minimal'`, `'accordion'`, or `''` (no theme).
`openFirst`	boolean	`false`	✓	If true, the first item will be opened by default.
`openAll`	boolean	`false`	✓	If true, all items will be opened by default.
`closeAll`	string	`null`	✓	The selector for a button or link that will close all items when clicked.
`closeOthers`	boolean	`false`	✓	If true, opening one item will close all others.
`animate`	boolean	`false`	✓	If true, animate the opening and closing of items.
`icons`	array	`[]`	Core	An array of two strings representing the icons for the closed and open states. Can be inline SVG, an `<img>` element, or emojis.
`iconClass`	string	`'jsa-icon'`	Core	The class to apply to the icon element.
`termPadding`	string	`'0.5em 1em'`	Core	The padding to apply to the term element.
`schema`	boolean	`false`	✓	If true, JSON-LD schema will be generated for SEO.
`schemaType`	string	`'FAQPage'`	✓	The type of schema to generate. Options are `'FAQPage'` or `'Article'`.
`termBg`	string	`'transparent'`	Core `darkmode: true`	The background color for the term element. Can be a color name, hex, or rgba value.
`termBgActive`	string	`'black'`	Core `darkmode: true`	The background color for the "Active" term element. Can be a color name, hex, or rgba value.
`termColor`	string	`'#719456'`	Core `darkmode: true`	The text color for the term element. Can be a color name, hex, or rgba value.
`termColorActive`	string	`'#fff'`	Core `darkmode: true`	The text color for the "Active" term element. Can be a color name, hex, or rgba value.
`borders`	boolean	`true`	Core	If true, borders will be added between terms.
`borderColor`	string	`'#719456'`	Core `darkmode: true`	The border color between terms. Can be a color name, hex, or rgba value.
`darkmode`	boolean	`false`	Core `darkmode: true`	If true, dark mode styles will be applied.
`debug`	boolean	`false`	✓	If true, logs the accordion configuration.

Default Accordion

JSA by default applies no styles. This is ideal if you want to apply your own custom styles from scratch. The collapse functionality is handled within the instance.

What is the capital of France?: The capital of France is Paris.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe voluptatem rerum et temporibus. Ullam, vero tenetur quasi laudantium aut illum.
What is the capital of Germany?: The capital of Germany is Berlin.
What is the capital of Italy?: The capital of Italy is Rome.

new jsa();

Theme Core 🌑

Core delivers the essential accordion layout with inline styles only—no external CSS needed. Ideal for rapid prototypes or quick drop-ins, it works out of the box and can be overridden if custom styling is required.

By default, it doesn't include icons for the open/close states. You can add your own—using inline SVG, an <img> element, or even emojis.

What is the capital of France?: The capital of France is Paris.
What is the capital of Germany?: The capital of Germany is Berlin.
What is the capital of Italy?: The capital of Italy is Rome.

new jsa(
  {
   icons: ['😅', '🥹'],
  }
);

🌑 Dark mode support but must activate darkmode: true in options. See Options

Theme Minimal 🌑

Setting theme to minimal provides a basic styling for the accordion. It requires jsa-themes.min.css or adding _jsa.theme-minimal.scss to your project. This theme is a great starting point for custom styling.

This example is using :root variables for dark mode customization.

What is the capital of France?: The capital of France is Paris.

Lorem ipsum dolor sit amet consectetur adipisicing elit. Est temporibus, ducimus quibusdam aperiam commodi aut voluptatum ad ab beatae dicta.
What is the capital of Germany?: The capital of Germany is Berlin.
What is the capital of Italy?: The capital of Italy is Rome.

new jsa(
  {
   theme: "minimal",
  }
);

Basic Control ( `:root` Variables )

These variables allow you to customize the appearance without diving into the SCSS code or writing custom styles.

--jsa-min-font-family
--jsa-min-font-family-darkmode
--jsa-min-dt-font-weight
--jsa-min-dt-border-color
--jsa-min-dt-border-color-darkmode
--jsa-min-dt-anchor-color
--jsa-min-dt-anchor-color-darkmode
--jsa-min-dt-anchor-active-color
--jsa-min-dt-anchor-active-color-darkmode
--jsa-min-dt-anchor-decoration
--jsa-min-dt-anchor-decoration-hover
--jsa-min-dt-expand-icon-size
--jsa-min-dt-expand-icon-right
--jsa-min-dt-padding
--jsa-min-dt-active-bgcolor
--jsa-min-dt-active-bgcolor-darkmode
--jsa-min-dl-bg-darkmode
--jsa-min-dt-anchor-hover-color-darkmode

Full Control ( SCSS Variables )

If you're using SCSS, you can override these variables before importing the theme to customize the appearance of the minimal theme.


@use ../themes/variables with (

 // See variables.scss for more variables
 $jsa-dt-border-color: #121212,

);


@use ../themes/jsa.theme-minimal;

.jsa-theme-minimal dt {

border-top: 1px solid #{variables.$jsa-dt-border-color} !important;

🌑 Dark mode is part of the theme and you may override the styles with :root variables or scss variables.

Theme Accordion

Setting theme to accordion provides a fully styled accordion. It requires jsa-themes.min.css or adding _jsa.theme-accordion.scss to your project. This theme mimics Bootstrap's accordion component.

What is the capital of France?: The capital of France is Paris.
What is the capital of Germany?: The capital of Germany is Berlin.
What is the capital of Italy?: The capital of Italy is Rome.

new jsa(
  {
   theme: "accordion",
  }
);

Basic Control ( `:root` Variables )

These variables allow you to customize the appearance without diving into the SCSS code or writing custom styles.

--jsa-acc-font-family
--jsa-acc-font-family-darkmode
--jsa-acc-dt-font-weight
--jsa-acc-dt-border-color
--jsa-acc-dt-border-color-darkmode
--jsa-acc-dt-anchor-color
--jsa-acc-dt-anchor-color-darkmode
--jsa-acc-dt-anchor-active-color
--jsa-acc-dt-anchor-active-color-darkmode
--jsa-acc-dt-anchor-decoration
--jsa-acc-dt-anchor-decoration-hover
--jsa-acc-dt-expand-icon-size
--jsa-acc-dt-expand-icon-right
--jsa-acc-dt-padding
--jsa-acc-dt-active-bgcolor
--jsa-acc-dt-active-bgcolor-darkmode
--jsa-acc-dl-bg-darkmode
--jsa-acc-dt-anchor-hover-color-darkmode

Full Control ( SCSS Variables )

If you're using SCSS, you can override these variables before importing the theme to customize the appearance of the minimal theme.


@use ../themes/variables with (

 // See variables.scss for more variables
 $jsa-dt-border-color: #121212,

);


@use ../themes/jsa.theme-accordion;

.jsa-theme-accordion dt {

border-top: 1px solid #{variables.$jsa-dt-border-color} !important;

Getting Started

Options Customize the Accordion

Default Accordion

Theme Core 🌑

Theme Minimal 🌑

Basic Control ( :root Variables )

Full Control ( SCSS Variables )

Theme Accordion

Basic Control ( :root Variables )

Full Control ( SCSS Variables )

Basic Control ( `:root` Variables )

Basic Control ( `:root` Variables )