Accordion

<bh-accordion> | BharatAccordion

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.

Open in

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

This is the content of the outline transparent accordion.

This is the content of the modern accordion.

Basic Usage

Preview

Open in

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

HTML

<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>

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
    <BharatAccordion header="Click to expand">
      <p>
       This is the content of the accordion that will be shown or hidden when clicked.
      </p>
    </BharatAccordion>
);
}

export default App;

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

Open in

This is the content of the default accordion.

HTML

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

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
    <BharatAccordion header="Default Accordion">
      <p>
       This is the content of the accordion that will be shown or hidden when clicked.
      </p>
    </BharatAccordion>
);
}

export default App;

Outline Transparent

Similar to outline but with transparent backgrounds.

Preview

Open in

This is the content of the outline transparent accordion.

HTML

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

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
    <BharatAccordion variant="outline-transparent" header="Outline Transparent">
      <p>
      This is the content of the outline transparent accordion.
      </p>
    </BharatAccordion>
);
}

export default App;

Modern

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

Preview

Open in

This is the content of the modern accordion.

HTML

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

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (

    <BharatAccordion variant="modern" header="Modern Accordion">
      <p>
      This is the content of the modern accordion.
      </p>
    </BharatAccordion>
);
}

export default App;

Sizes

The accordion component comes in three different sizes:

Preview

Open in

This is a small accordion (30% width).

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

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

HTML

<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>

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
  <BharatAccordionGroup>
    <BharatAccordion size="small" header="Small Accordion">
      <p>This is a small accordion (30% width).</p>
    </BharatAccordion>
    <BharatAccordion size="half" header="Half-width Accordion">
      <p>This is a small accordion (50% width).</p>
    </BharatAccordion>
    <BharatAccordion size="full" header="Full-width Accordion">
      <p>This is a small accordion (100% width).</p>
    </BharatAccordion>
  </BharatAccordionGroup>
);
}

export default App;

Accordion Groups

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

Basic Group

Preview

Open in

Content for the first accordion.

Content for the second accordion.

Content for the third accordion.

HTML

<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>

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
  <BharatAccordionGroup>
    <BharatAccordion header="First Accordion">
      <p>Content for the first accordion.</p>
    </BharatAccordion>
    <BharatAccordion header="Second Accordion">
      <p>Content for the second accordion.</p>
    </BharatAccordion>
    <BharatAccordion header="Third Accordion">
      <p>Content for the third accordion.</p>
    </BharatAccordion>
  </BharatAccordionGroup>
);
}

export default App;

Single Open Mode

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

Preview

Open in

Content for the first accordion.

Content for the second accordion.

Content for the third accordion.

HTML

<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>

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
  <BharatAccordionGroup  single-open>
    <BharatAccordion header="First Accordion">
      <p>Content for the first accordion.</p>
    </BharatAccordion>
    <BharatAccordion header="Second Accordion">
      <p>Content for the second accordion.</p>
    </BharatAccordion>
    <BharatAccordion header="Third Accordion">
      <p>Content for the third accordion.</p>
    </BharatAccordion>
  </BharatAccordionGroup>
);
}

export default App;

Advanced Features

Default Open

Make an accordion open by default:

Preview

Open in

This accordion is open by default.

HTML

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

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
    <BharatAccordion header="Default Open Accordion" default-open>
     <p>This accordion is open by default.</p>
    </BharatAccordion>
);
}

export default App;

Custom Icons

Change the default chevron icon using the icon-name attribute. Note - please use Bootstrap supported icon names only.

Preview

Open in

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

HTML

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

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

function App() {
return (
    <BharatAccordion icon-name="plus" header="Custom Icon Accordion">
     <p>This accordion uses a plus/minus icon instead of chevron.</p>
    </BharatAccordion>
);
}

export default App;

Real-world Examples

FAQ Section

Preview

Open in

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.

HTML

<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>

React

import React from 'react';
import { BharatAccordion, BharatAccordionGroup } from 'bharat-ui/react/components/accordion';

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

export default App;

Properties

bh-accordion | BharatAccordion 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