#### Source

```jsx static
// index.tsx
import React, { FC } from 'react';
import Box from 'components/Box';
import { Collapse } from 'components/wrappers';
import { AccordionProps } from 'types';
import AccordionHeader from './AccordionHeader';

export const Accordion: FC<AccordionProps> = ({
	background,
	children,
	className,
	direction,
	headerClassName,
	open,
	title,
	toggle,
	...rest
}) => {
	return (
		<Box className={className} {...rest}>
			<AccordionHeader
				background={background}
				className={headerClassName}
				title={title}
				toggle={toggle}
			/>
			<Collapse direction={direction} isVisible={open}>
				{children}
			</Collapse>
		</Box>
	);
};

Accordion.defaultProps = {
	open: false,
	title: 'Accordion Header',
};

export default Accordion;
```

#### Standard Use

```jsx padded
import { useState } from 'react';
import { Card } from '../Card';

const [open, setOpen] = useState(false);
<Accordion
	title="Accordion"
	toggle={() => setOpen(prev => !prev)}
	open={open}
	width="300px">
	<Card minH="200px" style={{ background: '#fff' }}>
		Menu Content
	</Card>
</Accordion>;
```