Accordion

Result

Loading...

Live Editor

<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>

<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>

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>

<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 />);

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>

<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

```