Skip to content
Stable

Accordion

Accordions are useful for simplifying overwhelming pages or progressively disclosing steps of a process. Be conscious that accordions require user interaction to see information and think about whether the cost of that is worthwhile. If an accordion is hiding only a small amount of information then perhaps an accordion is unnecessary. Consider accordions as an accompanyment to the key content of the page, allowing the user to focus on the important content outside of the accordion, whilst having easy access to complimentary content within the accordions.

Installation

bash
npm install @nib-components/accordion

Note: You will also need to install the peerDependencies @nib/icons and @nib-components/theme.

Usage

jsx
import Accordion from '@nib-components/accordion';

Note: If you are using this component within a React Server Component (like the NextJS 13 App Router), it is suggested to import Accordion and AccordionItem individually.

jsx
import Accordion, {AccordionItem} from '@nib-components/accordion';
jsx
<Accordion>
<AccordionItem title="Diam parturient" icon={StethoscopeSystemIcon}>
Diam parturient a a lorem augue montes
</AccordionItem>
<AccordionItem title="Parturient habitasse" icon={YogaSystemIcon}>
Parturient habitasse tincidunt porttitor
</AccordionItem>
</Accordion>

Interactive demo

jsx

Props

Accordion

PropTypeDefaultDescription
borderTopbooleanfalseWhether there is a border at the top of the accordion.
borderBottombooleantrueWhether there is a border at the bottom of the accordion. Unlike borderTop this prop is passed down to Accordion.Item to override its usual bottom border.
multiExpandedbooleanfalseAllow more than one Accordion.Item to be open at a time.
expandedIndexnumberInitially open an accordion item.
childrennodeA set of Accordion.Items.

Accordion.Item

PropTypeDefaultDescription
title (required)stringThe accordion item title.
titleComponentstringh4THe HTML element for the Accordion.Item title.
subtitlestringThe accordion item subtitle.
iconnodeA system icon to render for the Accordion.Item
onExpandfunctionCallback funtion that gets called on expand.
onCollapsefunctionCallback funtion that gets called on collapse.
onBeforeExpandfunctionCallback funtion that gets called before expanding.
onBeforeCollapsefunctionCallback funtion that gets called before collapsing.
childrennodeThe accordion content.
contentPaddingnumberPadding of the AccordionItem content.
hideItemBorderbooleanToggle the AccordionItem content border-bottom

Subtitles

Each accordion item has the option of including a descriptive label subtitle. Subtitles help when further context is required before accordion content is disclosed. Keep subtitles short and succint.

Icons

Each accordion item also has the option of including a system icon. Only system icons should be used with accordions, and their size is fixed at sm. Please do not use Graphic Icons as they are not designed to be used at small sizes.

If a suitable system icon cannot be found, you can request an icon be added to the library, or not include icons in your accordion.

jsx

Considerations

An accordion can help breakdown long content into discreet sections helping consumption and comprehension.

The accordion component may not be fit for purpose if that means hiding important information from the user or to simply to make a page smaller or hide required content for SEO purposes.

SEO and page ranking

If the primary purpose for specific accordion/s content is to rank in Google this is NOT recommended, nor fit for purpose of the SEO goal.

Avoid using an accordion to keyword stuff or hide SEO specific content that may not be relevant to the rendered content and overall user experience.

If the content is supportive to the overall SEO strategy, and the primary purpose is to assist and improve the user experience this tactic is valid.

Prior to version 5.0.3 the contents of the accordion would not be crawlable by SEO robots. New versions will have better SEO performance but still refer to earlier points for correct accordion usage.