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

Props

Accordion

AccordionHeaderContent

```