Accordion

Accordion component built around the native <details> and <summary> elements with additional styling and interaction handling taken care of by the component. Please have a look at the example below to learn more about the markup. The markup within the <summary> element closely resembles the 'list' element in this toolkit.

Attributes

attribute:	type:	required?	default:	description:
open	string	no		Use the `open` attribute on the `<details>` panel you want to be open by default

Examples

Accordion

asdfhasdf Single Title which isreallylongandeverythign Acknowledged 123

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Single Title which isreallylongandeverythign 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

somehere Single Title something in sub here

<dl-accordion>
    <details open>
        <summary>
            <div>
                <span class="content">
                    <span class="sub">asdfhasdf</span>
                    <span class="label">Single Title which isreallylongandeverythign</span>
                </span>
                <span class="meta">
                    <span class="dl-tag-category">Acknowledged</span>
                    <span class="dl-badge">123</span>
                </span>
            </div>
        </summary>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </details>
    <details>
        <summary>
            <div>
                <span class="content">
                  <span class="label">Single Title which isreallylongandeverythign</span>
                </span>
                <span class="meta">
                    <span class="dl-badge">4</span>
                </span>
            </div>
        </summary>
        <div>
            <p><strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua</strong>. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
        </div>
    </details>
    <details>
        <summary>
            <div>
                <span class="content">
                  <span class="sup">somehere</span>
                  <span class="label">Single Title</span>
                  <span class="sub">something in sub here</span>
                </span>
            </div>
        </summary>
        <div>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
            quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
            consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
            cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
            proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        </div>
    </details>
</dl-accordion>

Dealogic Styleguide

section menu

Accordion

Attributes

Examples

Accordion