Demo B: Handy Interactive Elements

<details> and <summary>

98% support.

A pair of elements for creating collapsible content.

• Easily styled, including open/closed states thanks to open attribute.
• Animating open/close is possible but a little gross. It's either complicated (Web Animations API) or hacky (hidden checkbox stuff).

Basic Example

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus.
• Vestibulum auctor dapibus neque.
• Nunc dignissim risus id metus.
• Cras ornare tristique elit.
• Vivamus vestibulum ntulla nec ante.
• Praesent placerat risus quis eros.
• Fusce pellentesque suscipit nibh.
• Integer vitae libero ac risus egestas placerat.

<dialog>

An element and JS API for creating a box or other interactive component, such as a dismissible alert, inspector, or subwindow.

• A very simple <dialog> can be implemented without JS.
• Most cases will require a little JS. But the API is simple.
• Accessibility for dialog-like UI elements is complicated, but it's all built-in with <dialog>.
• <dialog> has two modes: modal and non-modal or modeless.

My favorite seal.

Close

Popover API

A set of HTML attributes and JS API for creating and controlling dialog-like behavior in other kinds of elements.

popover vs <dialog>:

• Popovers are never modal, <dialog> can be.
• Always in the top layer. <dialog> only in top layer when modal.
• Can be completely controlled via HTML, no JS required.
• "light dismiss", click outside to hide.
• No focus trapping, but does affect focus navigation order.
• Can always be closed with Esc key. <dialog> only closed if modal.