GitHub

Preview

Details

Ready

Docs
HTML
Assets

Sets <summary> as a .minititle by default.

It uses the lobotomized owl technique to prevent excessive spacing inside the <details> element even if we don’t know the specific markup.

Use [data-accordion] on a wrapper element to set an accordion-like behavior using JS (where the opening of an item should close the rest).

Example




<div data-accordion>
    <details>
        <summary>Pure HTML5 accordion</summary>
        <p>This is HTML5's alternative to the old-fashioned accordion plugins made on JS.</p>
        <p>It's neat and simple. Love it.</p>
    </details>
    <details>
        <summary>Another details element</summary>
        <p>Just to check spacing, gutters, etc...</p>
    </details>
</div>

Assets

Filesystem Path: src/components/html/details/_details.scss
Size: 79 Bytes


                                details {
	@extend .owl;
}

summary {
	@include minititle();
	cursor:pointer;
}