Accordion

<bh-accordion>

The Accordion component (bh-accordion) provides a way to organize content into collapsible sections, making it ideal for FAQs, product descriptions, or any content that benefits from progressive disclosure.

Basic Usage

Preview
HTML

This is the content of the accordion that will be shown or hidden when clicked.

<bh-accordion header="Click to expand">
  <p>This is the content of the accordion that will be shown or hidden when clicked.</p>
</bh-accordion>

Variants

The accordion component comes with several style variants to match your design needs.

Default

The default accordion has a clean, minimal style with a light background.

Preview
HTML

This is the content of the default accordion.

<bh-accordion header="Default Accordion">
  <p>This is the content of the default accordion.</p>
</bh-accordion>

Outline

A dark-themed accordion with a contrasting border.

Preview
HTML

This is the content of the outline accordion.

<bh-accordion variant="outline" header="Outline Accordion">
  <p>This is the content of the outline accordion.</p>
</bh-accordion>

Outline Transparent

Similar to outline but with transparent backgrounds.

Preview
HTML

This is the content of the outline transparent accordion.

<bh-accordion variant="outline-transparent" header="Outline Transparent">
  <p>This is the content of the outline transparent accordion.</p>
</bh-accordion>

Modern

A sleek, modern design with subtle shadows and no borders.

Preview
HTML

This is the content of the modern accordion.

<bh-accordion variant="modern" header="Modern Accordion">
  <p>This is the content of the modern accordion.</p>
</bh-accordion>

Color Variants

The accordion comes in various color variants to match your application’s theme:

Preview
HTML

Primary-themed accordion content.

Secondary-themed accordion content.

Danger-themed accordion content.

Info-themed accordion content.

Warning-themed accordion content.

Success-themed accordion content.

<bh-accordion variant="primary" header="Primary Accordion">
  <p>Primary-themed accordion content.</p>
</bh-accordion>

<bh-accordion variant="secondary" header="Secondary Accordion">
  <p>Secondary-themed accordion content.</p>
</bh-accordion>

<bh-accordion variant="danger" header="Danger Accordion">
  <p>Danger-themed accordion content.</p>
</bh-accordion>

<bh-accordion variant="info" header="Info Accordion">
  <p>Info-themed accordion content.</p>
</bh-accordion>

<bh-accordion variant="warning" header="Warning Accordion">
  <p>Warning-themed accordion content.</p>
</bh-accordion>

<bh-accordion variant="success" header="Success Accordion">
  <p>Success-themed accordion content.</p>
</bh-accordion>

This is the content of the gradient accordion.

This is the content of the tricolor accordion.

<bh-accordion variant="gradient" header="Gradient Accordion">
  <p>This is the content of the gradient accordion.</p>
</bh-accordion>

<bh-accordion variant="tricolor" header="Tricolor Accordion">
  <p>This is the content of the tricolor accordion.</p>
</bh-accordion>

Sizes

The accordion component comes in three different sizes:

Preview
HTML

This is a small accordion (30% width).

This is a half-width accordion (50% width).

This is a full-width accordion (100% width).

<bh-accordion size="small" header="Small Accordion">
  <p>This is a small accordion (30% width).</p>
</bh-accordion>

<bh-accordion size="half" header="Half-width Accordion">
  <p>This is a half-width accordion (50% width).</p>
</bh-accordion>

<bh-accordion size="full" header="Full-width Accordion">
  <p>This is a full-width accordion (100% width).</p>
</bh-accordion>

Accordion Groups

You can group multiple accordions together for a cohesive look and behavior.

Basic Group

Preview
HTML

Content for the first accordion.

Content for the second accordion.

Content for the third accordion.

<bh-accordion-group>
  <bh-accordion header="First Accordion">
    <p>Content for the first accordion.</p>
  </bh-accordion>
  <bh-accordion header="Second Accordion">
    <p>Content for the second accordion.</p>
  </bh-accordion>
  <bh-accordion header="Third Accordion">
    <p>Content for the third accordion.</p>
  </bh-accordion>
</bh-accordion-group>

Combined Group

Create a seamless group of accordions with the combined attribute:

Preview
HTML

Content for the first accordion.

Content for the second accordion.

Content for the third accordion.

<bh-accordion-group combined>
  <bh-accordion header="First Accordion">
    <p>Content for the first accordion.</p>
  </bh-accordion>
  <bh-accordion header="Second Accordion">
    <p>Content for the second accordion.</p>
  </bh-accordion>
  <bh-accordion header="Third Accordion">
    <p>Content for the third accordion.</p>
  </bh-accordion>
</bh-accordion-group>

Single Open Mode

Ensure only one accordion is open at a time within a group:

Preview
HTML

Content for the first accordion.

Content for the second accordion.

Content for the third accordion.

<bh-accordion-group single-open>
  <bh-accordion header="First Accordion">
    <p>Content for the first accordion.</p>
  </bh-accordion>
  <bh-accordion header="Second Accordion">
    <p>Content for the second accordion.</p>
  </bh-accordion>
  <bh-accordion header="Third Accordion">
    <p>Content for the third accordion.</p>
  </bh-accordion>
</bh-accordion-group>

Advanced Features

Default Open

Make an accordion open by default:

Preview
HTML

This accordion is open by default.

<bh-accordion default-open header="Default Open Accordion">
  <p>This accordion is open by default.</p>
</bh-accordion>

Custom Icons

Change the default chevron icon:

Preview
HTML

This accordion uses a plus/minus icon instead of chevron.

<bh-accordion icon-name="plus" header="Custom Icon Accordion">
  <p>This accordion uses a plus/minus icon instead of chevron.</p>
</bh-accordion>

Real-world Examples

FAQ Section

Preview
HTML

Frequently Asked Questions

Bharat UI is a modern web component library designed for Indian websites and applications.

You can install Bharat UI via npm or use it directly via CDN.

Yes, all Bharat UI components are designed to be fully responsive across devices.

<h3>Frequently Asked Questions</h3>
<bh-accordion-group variant="outline-transparent" combined>
  <bh-accordion header="What is Bharat UI?">
    <p>Bharat UI is a modern web component library designed for Indian websites and applications.</p>
  </bh-accordion>
  <bh-accordion header="How do I install Bharat UI?">
    <p>You can install Bharat UI via npm or use it directly via CDN.</p>
  </bh-accordion>
  <bh-accordion header="Is Bharat UI responsive?">
    <p>Yes, all Bharat UI components are designed to be fully responsive across devices.</p>
  </bh-accordion>
</bh-accordion-group>

Properties

bh-accordion Properties

Property	Type	Description
`header`	String	The text displayed in the accordion header
`variant`	String	Style variant (`default`, `outline`, `outline-transparent`, `modern`, `primary`, `secondary`, `danger`, `info`, `warning`, `success`, `gradient`, `tricolor`)
`size`	String	Size of the accordion (`small`, `half`, `full`)
`width`	String	Custom width (overrides size)
`border`	String	Custom border style
`padding`	String	Custom padding
`fontSize`	String	Custom font size
`color`	String	Custom text color
`iconName`	String	Icon to display (requires bh-icon component)
`iconSize`	String	Custom icon size
`groupId`	String	ID for grouping accordions (set automatically when using bh-accordion-group)
`isOpen`	Boolean	Whether the accordion is open
`animated`	Boolean	Whether to animate transitions