Results for “Native disclosure & dialogs”
Small, practical examples. Search by task or narrow things down below.
Allow one disclosure in a named group to stay open
HTML: Matching details name attributes create an exclusive native accordion in supporting browsers.
HTML✓ Tested
Start a disclosure open while keeping it collapsible
HTML: The open attribute sets the initial details state without JavaScript.
HTML✓ Tested
Toggle a native popover from a button
HTML: The popovertarget relationship handles show and hide behavior without a click handler.
HTML✓ Tested
Clone inert template content into the document
HTML: Template children stay out of the rendered document until their fragment is inserted.
HTML✓ Tested
Dismiss a modal with the Escape key
HTML: Native modal dialogs provide keyboard dismissal and return focus to their invoker.
HTML✓ Tested
Display a calculated form result
HTML: An output element can name the input controls contributing to its value.
HTML✓ Tested
Open and close a modal dialog
HTML: showModal places a dialog in the top layer and makes the rest of the document inert.
HTML✓ Tested
Represent progress whose total is unknown
HTML: Omit value to make a progress element indeterminate.
HTML✓ Tested
Return a value from a dialog form
HTML: A form with method dialog closes its containing dialog without a network submission.
HTML✓ Tested
Show the current value of a range input
HTML: Mirror range input events into a labeled output for a native slider.
HTML✓ Tested
Create a native disclosure
Use details and summary to show optional HTML content without JavaScript.
HTML✓ Tested
Check native form validity before proceeding
jQuery: Use the native checkValidity API from the selected form.
jQuery✓ Tested