Details & Summary
Created for what is traditionally referred to as an "accordion" widget, the paired
summary elements can be used to show a snippet introductory or "summary" content that can be expanded / toggled open to show further "detail" content. These elements are useful for scenarios like a FAQ where users need to be able to quickly scan and parse a large amount of information.
In the above example, try changing the text that shows when the element is collapsed. Try changing the text that shows when the element is opened. Try adding additional paragraph to show only when the element is opened. For a more ambitious experiment, try adding a second
details element with its own content for closed and opened states.
dialog element is for pop-up content in what would traditionally be referred to as a modal or lightbox. when open, it overlays the normal page content.
dialog element is hidden by default, but can be set to display using the
open attribute like so:
<dialog open>. The typical way to toggle a
The following video demo is fully interactive. You can pause at any time to directly edit the code, and resume playback to restore to where you left off.