# Accordion
A collapsible content component that displays information in a compact, expandable format.
### **Import**
```tsx
import { Accordion } from '@app-studio/web';
```
### **Default**
```tsx
import React from 'react';
import { Accordion } from '../Accordion';
import { Text, Vertical } from 'app-studio';
export const DefaultAccordion = () => {
return (
Default Accordion (Single)
What is React?
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.
What are React Hooks?
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.
What is JSX?
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.
);
};
```
### **collapsible**
If true, allows all accordion items to be closed, even when `type` is set to 'single'.
- **Type:** `boolean`
- **Default:** `false`
- **Possible Values:** `true, false`
```tsx
import React from 'react';
import { Accordion } from '../Accordion';
import { Text, Vertical } from 'app-studio';
export const CollapsibleAccordion = () => {
return (
Collapsible Accordion (Single)
Question 1
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.
Question 2
This is the answer to question 2. Only one item can be open, but
it can be closed entirely.
);
};
```
### **Disabled**
```tsx
import React from 'react';
import { Accordion } from '../Accordion';
import { Text, Vertical } from 'app-studio';
export const DisabledAccordion = () => {
return (
Disabled Item
Regular Item
This is a regular accordion item that can be expanded and
collapsed.
Disabled Item
This content wont be accessible because the item is disabled.
Another Regular Item
This is another regular accordion item that can be expanded and
collapsed.
);
};
```
### **Index**
```tsx
export * from './default';
export * from './variants';
export * from './multiple';
export * from './disabled';
export * from './collapsible';
```
### **Multiple**
```tsx
import React from 'react';
import { Accordion } from '../Accordion';
import { Text, Vertical } from 'app-studio';
export const MultipleAccordion = () => {
return (
Multiple Expanded Items
First Item (Initially Expanded)
This item is initially expanded. You can expand multiple items at
once in this accordion.
Second Item
This is the second item. Try expanding this while the first item
is still open.
Third Item
This is the third item. You can have all three items expanded at
once.
);
};
```
### **Variants**
```tsx
import React from 'react';
import { Accordion } from '../Accordion';
import { Text, Vertical } from 'app-studio';
export const AccordionVariants = () => {
return (
Outline Variant
First Item
This is the content for the first item in the outline variant
accordion.
Second Item
This is the content for the second item in the outline variant
accordion.
Filled Variant
First Item
This is the content for the first item in the filled variant
accordion.
Second Item
This is the content for the second item in the filled variant
accordion.
square Shape
First Item
This is the content for the first item in the square shape
accordion.
Second Item
This is the content for the second item in the square shape
accordion.
);
};
```