Accordion Item
draft

An Accordion Item is a single expandable section with its own header and content, used within an Accordion.

Usage

  • Use as a child within an Accordion. Each Accordion Item represents one expandable section and manages its own header, content, and expanded state.

Example

icon-storybook-default View Storybook
Loading

Code

HTML 

import { NbhdAccordionItem } from '@fbin-web/neighborhood-core';
<nbhd-accordion-item header="Accordion Item">
  <nbhd-text> This is the content of the accordion item. <a href="#">This is a link</a>. </nbhd-text>
</nbhd-accordion-item>

React 

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

const App = () => (
  <>
    <NbhdAccordionItem header="Accordion Item">
      <NbhdText>
        This is the content of the accordion item. <a href="#">This is a link</a>.
      </NbhdText>
    </NbhdAccordionItem>
  </>
);

Properties

Property Attribute Type Default Description
expanded expanded boolean false Controls whether the accordion item is expanded or collapsed.
icon icon chevron | plus-minus chevron The icon type to display in the header.
header header string The header text for the accordion item. Falls back to the header slot content when omitted.

Events

Name Description Event Detail
nbhd-accordion-toggle Emitted when the header toggle is activated. The detail contains the next expanded state. { expanded: boolean }

Slots

Name Description
(default) The accordion panel content that is shown when the item is expanded.
header Optional header content rendered in the toggle button. If omitted, the header property is used as the fallback text.

CSS Parts

Name Description
base The outer wrapper for the entire accordion item.
header The clickable header button that toggles the expanded state.
panel The expandable region containing the accordion content.
panel-content The inner wrapper around the slotted accordion content.

CSS Properties

Property Default Value
--nbhd-accordion-item-inlineSize 100%
--nbhd-accordion-item-paddingBlock 0
--nbhd-accordion-item-paddingInline 0
--nbhd-accordion-item-header-justifyContent var(--nbhd-action-plain-justifyContent)
--nbhd-accordion-item-header-fontSize var(--nbhd-action-plain-fontSize)
--nbhd-accordion-item-header-fontWeight var(--nbhd-action-plain-fontWeight)
--nbhd-accordion-item-header-lineHeight var(--nbhd-action-plain-lineHeight)
--nbhd-accordion-item-header-paddingBlock var(--nbhd-action-plain-paddingBlock)
--nbhd-accordion-item-header-paddingInline var(--nbhd-action-plain-paddingInline)
--nbhd-accordion-item-header-inlineSize auto
--nbhd-accordion-item-header-borderRadius 0
--nbhd-accordion-item-header-focus-outlineOffset var(--nbhd-focus-outlineOffset)
--nbhd-accordion-item-panel-paddingBlock 0
--nbhd-accordion-item-panel-paddingInline 0

Dependencies

This component contains the following components as dependencies.