It’s worth noting that a summary element does not necessarily mean it must contain a “summary” of the other children of the details element. With or without the optional nested div (which is only there for a wrapper to style), in its collapsed state the only visible element would be the summary and its contents.Īdding the open attribute to the details element will expand the nested content by default. The expected markup pattern for details and summary is as following: Outside of Internet Explorer (which will never support the elements) and pre-Chromium Edge, browser implementation of details and summary is pretty great! A “disclosure widget” being a UI component that allows for the showing / hiding (toggling the display) of content associated with the disclosure trigger (button). The details and summary elements are two of HTML’s interactive elements and together are the elements that create a native disclosure widget. Instead, check out The details and summary elements, again for a more recent rundown of these elements.

This post has been modified to remove and update some of its information, but there remain many references to support specific to the original publication date.

However, there have been many significant changes since then, such as the WHATWG HTML spec becoming the sole HTML specification, Edge adopting the Chromium browser engine, etc. This post contains information that was accurate at the time of its initial publication.

Nvda screen reader 2018