AccordionItem

Install

yarn add @ntds/accordion

Import

import { Accordion } from '@ntds/accordion';

Usage

<Accordion tw={{ sizing: 'max-w-sm' }}>
    <Accordion.Item
        headingLevel={2}
        title='Title'
        details={() => (
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
        )}
    />
    <Accordion.Item
        headingLevel={2}
        title='What does Lorem ipsum?'
        details={() => (
            <>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>
                <p>Tristique nostra eget nisl tortor ex placerat habitasse et.</p>
                <p>Suspendisse vulputate pretium laoreet eu posuere ligula cursus ornare suscipit ipsum risus himenaeos elit suspendisse.</p>
            </>
        )}
    />
</Accordion>

Props

Prop	Type & Description
headingLevel	HeadingLevel The heading level to use in-context. The level used will not change the appearance or style. 1 = <h1> 2 = <h2> ... and so on
title	ReactNode The summary text that is always shown. When clicked, will expand the detail section.
startOpen	boolean Default value: "false" Whether or not to render the AccordionItem expanded by default The user can still close it.
tw	TwGroupKeys Tailwind overrides for the container-element
twDetails	TwGroupKeys Tailwind overrides for the expanded details container
details	() => ReactNode Usually simple text, but can be anything.