# Accordion

Organizes content into collapsible sections for efficient space management.

### **Import**
```tsx
import { Accordion } from '@app-studio/web';
```

### **Default**
```tsx
import React from 'react';
import { Accordion } from '@app-studio/web';
import { Text, Vertical } from 'app-studio';

export const DefaultAccordion = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={600}>
      <Text marginBottom={10}>Default Accordion (Single)</Text>
      <Accordion type="single" defaultValue="item-1">
        <Accordion.Item value="item-1">
          <Accordion.Trigger>
            <Text fontWeight="bold">What is React?</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              React is a JavaScript library for building user interfaces. It is
              maintained by Facebook and a community of individual developers
              and companies. React can be used as a base in the development of
              single-page or mobile applications.
            </Text>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="item-2">
          <Accordion.Trigger>
            <Text fontWeight="bold">What are React Hooks?</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              Hooks are functions that let you hook into React state and
              lifecycle features from function components. Hooks dont work
              inside classes — they let you use React without classes.
            </Text>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="item-3">
          <Accordion.Trigger>
            <Text fontWeight="bold">What is JSX?</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              JSX is a syntax extension for JavaScript. It was written to be
              used with React and looks a lot like HTML. Because JSX is
              JavaScript, you can use variables inside it.
            </Text>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion>
    </Vertical>
  );
};
```

### **collapsible**
If true, allows all accordion items to be collapsed, meaning no item has to be open.

- **Type:** `boolean`
- **Default:** `false`

```tsx
import React from 'react';
import { Accordion } from '@app-studio/web';
import { Text, Vertical } from 'app-studio';

export const CollapsibleAccordion = () => {
  return (
    <Vertical gap={20} width="100%" maxWidth={600}>
      <Text marginBottom={10}>Collapsible Accordion (Single)</Text>
      <Accordion type="single" defaultValue="item-1" collapsible>
        <Accordion.Item value="item-1">
          <Accordion.Trigger>
            <Text fontWeight="bold">Question 1</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              This is the answer to question 1. Since `collapsible` is true, you
              can click the trigger again to close this item, even though its
              the only one.
            </Text>
          </Accordion.Content>
        </Accordion.Item>

        <Accordion.Item value="item-2">
          <Accordion.Trigger>
            <Text fontWeight="bold">Question 2</Text>
          </Accordion.Trigger>
          <Accordion.Content>
            <Text>
              This is the answer to question 2. Only one item can be open, but
              it can be closed entirely.
            </Text>
          </Accordion.Content>
        </Accordion.Item>
      </Accordion>
    </Vertical>
  );
};
```