Accordion Component

Import

import { Accordion } from 'rohit-ui';

Examples

Basic Accordion

▼ Section 1

Content for section 1

▶ Section 2

// Basic accordion
<Accordion items={[
  { 
    title: "Section 1",
    content: <p>Content for section 1</p>
  },
  { 
    title: "Section 2",
    content: <p>Content for section 2</p>
  }
]} />

Accordion with Icons

📁 ▼ Files

File content

⚙️ ▶ Settings

// Controlled accordion with state
const [expandedSections, setExpandedSections] = useState([0]);

<Accordion
  items={[
    { 
      title: "Files",
      icon: "📁"
    },
    { 
      title: "Settings",
      icon: "⚙️"
    }
  ]}
  expandedSections={expandedSections}
  onChange={setExpandedSections}
/>

Rohit Mode Accordion

▼ UNNECESSARILY COMPLICATED

This accordion is unnecessarily complicated.

// Rohit Mode accordion
<Accordion
  items={[
    { 
      title: "Dramatic Section 1",
      content: <p>Drama content 1</p>
    },
    { 
      title: "Dramatic Section 2",
      content: <p>Drama content 2</p>
    }
  ]}
  rohitMode
/>

Note: In Rohit Mode, the accordion will wiggle, change color, and sometimes randomly expand/collapse sections.

Props

Name	Type	Default	Description
defaultExpanded	number[]	[]	Indices of initially expanded sections
onChange	function	-	Function called when sections are expanded/collapsed
children	ReactNode	-	Accordion sections
className	string	-	CSS class to apply to the accordion container
rohitMode	boolean	false	Enables Rohit Mode with silly animations and behaviors

Accordion.Item Props

Name	Type	Default	Description
title	string	-	Title text for the section
icon	string	-	Icon to display before the section title
disabled	boolean	false	Whether the section is disabled

CSS Customization

You can customize the Accordion component using styled-components:

import styled from 'styled-components';
import { Accordion } from 'rohit-ui';

const CustomAccordion = styled(Accordion)`
  border: 2px solid var(--win98-navy);
  border-radius: 4px;
  overflow: hidden;
  
  .accordion-header {
    background: linear-gradient(to right, var(--win98-navy), var(--win98-silver));
    color: white;
    padding: 12px 16px;
    font-family: 'Comic Sans MS', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    
    &:hover {
      background: linear-gradient(to right, var(--win98-silver), var(--win98-navy));
    }
  }
  
  .accordion-content {
    background: white;
    padding: 16px;
    border-top: 1px solid var(--win98-navy);
  }
`;

function MyComponent() {
  return (
    <CustomAccordion
      sections={[
        { 
          title: "Custom Section 1",
          content: <p>Content 1</p>
        },
        {
          title: "Custom Section 2",
          content: <p>Content 2</p>
        }
      ]}
    />
  );
}

Rohit Mode Behavior

When Rohit Mode is enabled, the Accordion component will:

Wiggle or bounce randomly
Change color periodically
Sometimes randomly expand/collapse sections
Draw unnecessary attention to itself