Skip to main content

Accordion

Accordion​

Description:
The Accordion component is a collapsible content container that can hold multiple items, with only one item being visible at a time.

Usage:

import React from 'react';
import Accordion from 'blendx-ui/Accordion';

const MyAccordion = () => (
  <Accordion defaultActiveKey="0" icon="info" title="Accordion Title" alwaysOpen={false}>
    <div>Accordion Content</div>
  </Accordion>
);

export default MyAccordion;

Props:

  • children (node, required): The content to be displayed inside the accordion.
  • defaultActiveKey (string): The key of the initially active item.
  • icon (node): The icon to display next to the accordion title.
  • title (string): The title of the accordion.
  • alwaysOpen (bool): If true, the accordion will always be open.
  • className (string): Additional class names for custom styling.

Example:

<Accordion defaultActiveKey="0" icon="info" title="Click me" alwaysOpen={true}>
  <div>This is the content</div>
</Accordion>

Dependencies​

RepositoryUsage Count
frontend-app-dashboard1

Detailed usage locations:​

frontend-app-dashboard

  • src/pages/course-single/index.jsx