Accordion

Expandable content sections with ASCII-style indicators for organizing information.

Docs•API Reference

Default (Single Open):

Import components and start building your retro interface:

import { AsciiButton, AsciiInput } from 'react-ascii-ui';

Multiple Open Allowed:

Master Node.js, Python, and database technologies.

Installation

npm install react-ascii-ui

Usage

import { AsciiAccordion } from 'react-ascii-ui';

const items = [
  {
    title: "Section 1",
    content: "Content for the first section",
    defaultOpen: true
  },
  {
    title: "Section 2", 
    content: "Content for the second section"
  }
];

export default function Example() {
  return <AsciiAccordion items={items} />;
}

Examples

Basic Accordion

const items = [
  { title: "First Item", content: "Content of the first item" },
  { title: "Second Item", content: "Content of the second item" }
];

<AsciiAccordion items={items} />

Default Open

This section starts expanded
const items = [
  { title: "Always Closed", content: "This starts closed" },
  { title: "Initially Open", content: "Expanded by default", defaultOpen: true }
];

<AsciiAccordion items={items} />

Allow Multiple Open

This one can be open too
<AsciiAccordion 
  items={items}
  allowMultiple 
/>

API Reference

Props

PropTypeDefaultDescription
itemsAsciiAccordionItem[]-Array of accordion items to display
allowMultiplebooleanfalseWhether multiple sections can be open simultaneously
classNamestring""Additional CSS classes

AsciiAccordionItem

PropertyTypeRequiredDescription
titlestringYesThe header text for the accordion item
contentReact.ReactNodeYesThe content to show when expanded
defaultOpenbooleanNoWhether this item should start expanded

AsciiAccordion extends all HTML div attributes and React.HTMLAttributes.