<details-toggle>

The gods of the World Wide Web, in their eternal wisdom, delivered onto us a <details> element that is impossible to style with opening or closing transitions. So the <details-toggle> custom element provides an animated alternative.

Click to open

Crunchum ipsum dolor sit coder void, constructor function, sed do while loop python orientation semi colon incident. Duis aute irure indent tabs or spaces velit esse cilium buntum how crunchy duntum. Excepteur tranquilis syntax error memorandum qui officia nostrud operating system alertus.

Import

Include the CSS:

<link rel="stylesheet" href="./details-toggle.css" />

Import and register the <details-toggle> custom element, upgrading any instances already in the DOM:

import DetailsToggle from 'literal/documentation/templates/details-toggle.js';

Use

A details-toggle is collapsed to the height of its slot="summary" content by default, and opens to display all content when the summary content is clicked.

<details-toggle>
    <h4 slot="summary">Click to open</h4>
    Crunchum ipsum dolor sit coder void, constructor function, sed
    do while loop python orientation semi colon incident. Duis aute
    irure indent tabs or spaces velit esse cilium buntum how crunchy
    duntum.
</details-toggle>

Attributes

open

A boolean attribute describing the state of the details-toggle.

Properties

.open

false A boolean property describing the state of the details-toggle: true when the details-toggle is open, false when it is not.

Events

"details-activate"

Sent from details-toggle when opened.

"details-deactivate"

Sent from details-toggle when closed.

Parts

::part(content)

Style the content block of the <details-toggle>. Use this to alter the opening/closing transition. To continue to use the toggle with an opening/closing animation max-height, margin-bottom and padding-bottom must be included:

details-toggle::part(content) {
    transition:
        max-height 0.5s cubic-bezier(0.25, 0, 0.5, 1),
        margin-bottom 0.5s cubic-bezier(0.25, 0, 0.5, 1),
        padding-bottom 0.5s cubic-bezier(0.25, 0, 0.5, 1);
}

details-toggle[open]::part(content) {
    transition:
        max-height 0.3s cubic-bezier(0.25, 0, 0.5, 1),
        margin-bottom 0.3s cubic-bezier(0.25, 0, 0.5, 1),
        padding-bottom 0.3s cubic-bezier(0.25, 0, 0.5, 1);
}

Variables

--bleed

A <details-toggle> hides the overflow of it’s content. Normally this would truncate shadows and any element that hangs outside its padding box, but to avoid this the content slot is made to ‘bleed’ larger than the parent box. This variable controls the bleed distance.

Contribute

Support development: Sponsor

Built by Stephen Band for Cruncher logo Cruncher.

Documentation set in Euclid and Martian Mono. Fonts used for documentation not included as part of the license covering the use of details-toggle.