Skip to main content

Accordion

Result
Loading...
Live Editor
<div data-testid="pw-accordion-1">
	<Accordion>
		<Accordion.Item eventKey="1">
			<Accordion.Header>Item 1</Accordion.Header>
			<Accordion.Body>Content 1</Accordion.Body>
		</Accordion.Item>
		<Accordion.Item eventKey="2">
			<Accordion.Header>Item 2</Accordion.Header>
			<Accordion.Body>Content 2</Accordion.Body>
		</Accordion.Item>
		<Accordion.Item eventKey="3">
			<Accordion.Header>Item 3</Accordion.Header>
			<Accordion.Body>Content 3</Accordion.Body>
		</Accordion.Item>
		<Accordion.Item eventKey="4">
			<Accordion.Header>Item 4</Accordion.Header>
			<Accordion.Body>Content 4</Accordion.Body>
		</Accordion.Item>
	</Accordion>
</div>

With the AccordionHeaderContent component​

Kyber provides an AccordionHeaderContent component to help you build an accordion with render props for each section of the header.

Result
Loading...
Live Editor
<Accordion>
	<Accordion.Item eventKey="1">
		<Accordion.Header>
			<AccordionHeaderContent
				renderPrefix={() => <span className="icon-placeholder" />}
				renderTitle={() => 'Account #1'}
				renderHelper={() => '$25,000'}
			/>
		</Accordion.Header>
		<Accordion.Body>Account Details</Accordion.Body>
	</Accordion.Item>
	<Accordion.Item eventKey="2">
		<Accordion.Header>
			<AccordionHeaderContent
				renderPrefix={() => <span className="icon-placeholder" />}
				renderTitle={() => 'Account #2'}
				renderHelper={() => (
					<span>
						$25,000<span className="ms-3 icon-alert-triangle text-warning"></span>
					</span>
				)}
			/>
		</Accordion.Header>
		<Accordion.Body>Account Details</Accordion.Body>
	</Accordion.Item>
</Accordion>

Using with collapsible Cards​

The useAccordionButton can be used within a custom toggle to control the state of the Accordion. In this example the Card component is used to create a collapsible card.

Result
Loading...
Live Editor
function CustomToggle({ children, eventKey }) {
	const decoratedOnClick = useAccordionButton(eventKey, () => console.log('totally custom!'));

	return (
		<div role="button" onClick={decoratedOnClick}>
			{children}
		</div>
	);
}

function Example() {
	return (
		<Accordion defaultActiveKey="0">
			<Card>
				<Card.Header>
					<CustomToggle eventKey="0">Card Header</CustomToggle>
				</Card.Header>
				<Accordion.Collapse eventKey="0">
					<Card.Body className="pt-0">Card Body</Card.Body>
				</Accordion.Collapse>
			</Card>
		</Accordion>
	);
}

render(<Example />);

Using ListGroup​

It's possible to create a ListGroup styled Accordion by setting the as prop of Accordion.Item to ListGroup.Item. Use the ListGroup.Item.Template component inside the Accordion.Item to match the visual style of the ListGroup component.

Result
Loading...
Live Editor
<Accordion>
	<Accordion.Item eventKey="1" as={ListGroup.Item}>
		<ListGroup.Item.Template
			prefix={<Switch aria-label="Switch" />}
			header={
				<Accordion.Header>
					<ListGroup.Item.Header title="Title" helper="Helper text" />
				</Accordion.Header>
			}
			body={
				<Accordion.Collapse eventKey="1">
					<ListGroup.Item.Body
						description="Description goes here underneath all of the items above and respects indentation for inputs."
						actions={<Button size="sm">Action</Button>}
					/>
				</Accordion.Collapse>
			}
		/>
	</Accordion.Item>

	<Accordion.Item eventKey="2" as={ListGroup.Item}>
		<ListGroup.Item.Template
			prefix={<Switch aria-label="Switch" />}
			header={
				<Accordion.Header>
					<ListGroup.Item.Header title="Title" helper="Helper text" />
				</Accordion.Header>
			}
			body={
				<Accordion.Collapse eventKey="2">
					<ListGroup.Item.Body
						description="Description goes here underneath all of the items above and respects indentation for inputs."
						actions={<Button size="sm">Action</Button>}
					/>
				</Accordion.Collapse>
			}
		/>
	</Accordion.Item>
</Accordion>

Props​

Accordion​

AccordionHeaderContent​