Class USAAccordion

USA Accordion The USA Accordion component is used to initialize content creator accordion markup with augmented accordion markup.

Default Options

• allowMultipleOpen: false (Boolean for multiselectable accordion, default is false)
• openSections: [1] (Array of sections to start open, default is first section)

Initialization Examples

The easiest way to use the accordion is to let the NCIDS automatically initialize your accordion HTML.

Just add the following to the top of your main Javascript file and it will add code to your javascript that initializes the Accordion with default options.

import '@nciocpl/ncids-js/usa-accordion/auto-init';
Copy

If you'd like to initialize the accordion with the default options, you can manually initialize the accordion. Below are examples doing so with the default options, and with custom options.

Default Options

import { USAAccordion } from '@nciocpl/ncids-js/components/usa-accordion';
const accordion = document.querySelector('.usa-accordion');
USAAccordion.create(accordion);
Copy

Custom Options

import { USAAccordion } from '@nciocpl/ncids-js/components/usa-accordion';
const accordion = document.querySelector('.usa-accordion');
USAAccordion.create(accordion, {
  allowMultipleOpen: true
});
Copy

HTML Events

The USA Accordion component will dispatch the following CustomEvent types that can be used to track analytics or other needs when a visitor interacts with the accordion.

Mega Menu Interaction Events

• usa-accordion:openAll - Dispatched when function is called to open all accordion sections.
• usa-accordion:closeAll - Dispatched when function is called to close all accordion sections.
• usa-accordion:section:expand - Dispatched when a user expands the selected section of the accordion.
• usa-accordion:section:collapse - Dispatched when a user collapses the selected currently open section of the accordion.