Home
Introduction
Color Library

Components

Alert
Avatar
Badge
Button
Details
Icon
Tabs
Time-ago
Tooltip
Table

Form components

Text Input
Textarea
Checkbox
Radio
Select
Components

Details

A disclosure component

Usage 

Is it accessible?
Yes, more than any custom disclose component you'll find on the web, because it's made with native elements.
<ui:Details>
  <ui:Details.Summary>Is it accessible?</ui:Details.Summary>
  <ui:Details.Panel>
    Yes, more than any custom disclose component you'll find on the web, because it's made
    with native elements.
  </ui:Details.Panel>
</ui:Details>

The name attribute enables multiple <Details> elements to be connected, with only one open at a time. The <Details> elements don't even have to be adjacent to one another in the source to be part of the same group.

FAQ 

What is your refund policy?
If you're unhappy with your purchase, we'll refund you in full.
Do you offer technical support?
No, use Google or something.
How much wood could a woodchuck chuck if a woodchuck could chuck wood?
If a woodchuck could chuck wood he would chuck as much wood as a woodchuck could chuck.
<div>
  <h3>FAQ</h3>
  <ui:Details name="faq">
    <ui:Details.Summary>What is your refund policy?</ui:Details.Summary>
    <ui:Details.Panel>
      If you're unhappy with your purchase, we'll refund you in full.
    </ui:Details.Panel>
  </ui:Details>
  <ui:Details name="faq">
    <ui:Details.Summary>Do you offer technical support?</ui:Details.Summary>
    <ui:Details.Panel>
      No, use Google or something.
    </ui:Details.Panel>
  </ui:Details>
  <ui:Details name="faq">
    <ui:Details.Summary>How much wood could a woodchuck chuck if a woodchuck could chuck wood?</ui:Details.Summary>
    <ui:Details.Panel>
      If a woodchuck could chuck wood he would chuck as much wood as a woodchuck could chuck.
    </ui:Details.Panel>
  </ui:Details>
</div>

Events 

The Details component doesn't emit or listen to any events, but the native <details> element inside do.

In addition to the usual events supported by HTML elements, the <details> element supports the toggle event, which is dispatched to the <details> element whenever its state changes between open and closed.

The toggle event is sent after the state is changed, although if the state changes multiple times before the browser can dispatch the event, the events are coalesced so that only one is sent.

details.addEventListener("toggle", (event) => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

Component arguments 

Details 

No arguments.

Details.Summary 

No arguments.

Details.Panel 

No arguments.

Components 

Component
File
Source
Details
details/index.jinja
Details.Summary
details/summary.jinja
Details.Panel
details/panel.jinja
details/details.css