Accordion
draft

Accordion organizes collapsible Accordion Item components, providing consistent layout, styling, and accessibility for grouped expandable content.

icon-storybook-default Open in Storybook
Loading

Code

HTML 

import { NbhdAccordion } from '@fbin-web/neighborhood-core';
<nbhd-accordion>

  <nbhd-accordion-item header="Accordion Item 1" icon="chevron">

    <nbhd-text> This is the content for accordion item 1. </nbhd-text>
  </nbhd-accordion-item>

  <nbhd-accordion-item header="Accordion Item 2" icon="chevron">

    <nbhd-text> This is the content for accordion item 2. </nbhd-text>
  </nbhd-accordion-item>

  <nbhd-accordion-item header="Accordion Item 3" icon="chevron">

    <nbhd-text> This is the content for accordion item 3. </nbhd-text>
  </nbhd-accordion-item>

</nbhd-accordion>

React 

import { NbhdAccordion, NbhdAccordionItem, NbhdText } from '@fbin-web/neighborhood-react';

const App = () => (
  <>
    <NbhdAccordion>
      <NbhdAccordionItem
        header="Accordion Item 1"
        icon="chevron">
        <NbhdText> This is the content for accordion item 1. </NbhdText>
      </NbhdAccordionItem>

      <NbhdAccordionItem
        header="Accordion Item 2"
        icon="chevron">
        <NbhdText> This is the content for accordion item 2. </NbhdText>
      </NbhdAccordionItem>

      <NbhdAccordionItem
        header="Accordion Item 3"
        icon="chevron">
        <NbhdText> This is the content for accordion item 3. </NbhdText>
      </NbhdAccordionItem>
    </NbhdAccordion>
  </>
);

Properties

Property Attribute Type Default Description
allowMultiple allow-multiple boolean false Allow multiple accordion items to be open at the same time.

Slots

Name Description
(default) The default slot for accordion items.

CSS Properties

Property Default Value
--nbhd-accordionItem-borderEndColor var(--nbhd-color-gray)
--nbhd-accordionItem-borderEndStyle solid
--nbhd-accordionItem-borderEndWidth 1px

Dependencies

This component contains the following components as dependencies.