Accordion
draft

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

Usage

  • Only accepts Accordion Item children.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

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

  <nbhd-accordion-item header="Accordion Item 1">
    <nbhd-text> This is the content for accordion item 1. </nbhd-text>
  </nbhd-accordion-item>

  <nbhd-accordion-item header="Accordion Item 2">
    <nbhd-text> This is the content for accordion item 2. </nbhd-text>
  </nbhd-accordion-item>

  <nbhd-accordion-item header="Accordion Item 3">
    <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">
        <NbhdText> This is the content for accordion item 1. </NbhdText>
      </NbhdAccordionItem>

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

      <NbhdAccordionItem header="Accordion Item 3">
        <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-accordion-item-borderBlockEndColor var(--nbhd-context-color-control-border)
--nbhd-accordion-item-borderBlockEndStyle solid
--nbhd-accordion-item-borderBlockEndWidth 1px

Dependencies

This component contains the following components as dependencies.