Accordion

A vertically stacked set of interactive headings that each reveal a section of content.

Default

The standard accordion component with single selection mode.

Our flagship product combines cutting-edge technology with sleek design. Manufactured from high-quality materials, it offers unparalleled performance and reliability.

The intuitive user interface is optimized for both beginners and experts.

We offer worldwide shipping via trusted courier partners. Standard delivery typically takes 3-5 business days.

  • Free shipping on orders over $50
  • Real-time shipment tracking
  • Insured shipping

We stand behind our products with a comprehensive 30-day return guarantee. If you are not completely satisfied, you can return the item in its original condition.

Multiple & Initially Opened

By using type="multiple", multiple items can be opened at the same time.

spartan/ui is a collection of accessible and customizable UI components for Angular, built on top of Tailwind CSS and Radix UI (via brain directives).

Yes! By setting type="multiple", you can allow multiple items to be opened at the same time. The default mode is single.

You can control the state of each item via the isOpened input and the openedChange output. Click the button below to toggle this item.

Custom Styles

Apply custom Tailwind CSS classes to theme the accordion according to your design system.

Blue Theme

You can easily theme the accordion using Tailwind CSS utility classes on the items, triggers, and content.

Success Style

All systems are running smoothly. No issues detected in the last 24 hours.

Custom Icons

Replace the default icons with custom ones to match your application's visual style.

You can replace the default chevron with any icon from your preferred icon library. This example uses a combination of Plus and Minus icons with custom transitions.

API Reference

Brain API

The brain directives provide the functional logic and state management for the accordion.

DirectiveSelectorInputs / Outputs
BrnAccordion[brnAccordion]
  • type: 'single' | 'multiple'
  • dir: 'ltr' | 'rtl'
  • orientation: 'horizontal' | 'vertical'
BrnAccordionItem[brnAccordionItem]
  • isOpened: boolean
  • openedChange: EventEmitter<boolean>
BrnAccordionTrigger[brnAccordionTrigger]Functional trigger for expanding/collapsing items.
BrnAccordionContent[brnAccordionContent]
  • style: string

Helm API

The helm directives provide the default spartan/ui styling for the accordion.

Component / DirectiveSelectorDescription
HlmAccordion[hlmAccordion], hlm-accordionMain container with flex layout.
HlmAccordionItem[hlmAccordionItem], hlm-accordion-itemIndividual item wrapper with bottom border.
HlmAccordionTrigger[hlmAccordionTrigger]Styled trigger button with hover and focus states.
HlmAccordionContenthlm-accordion-contentStyled content area with smooth height animations.
HlmAccordionIcon[hlmAccIcon]Icon directive that handles rotation based on state.

Installation & Usage

Installation

Imports

Basic Skeleton