<summary>
and <details>
HTML elementsThey work thusly: the details
element is a collapsible element, like how some file managers display folders with a small arrow or triangle next to them that can be clicked to show the folder's contents.
The first summary
element inside the details
element is what's shown when the element is closed. Anything else is only shown when the element is open.
One can add the attribute A I left this page without a global CSS style sheet. By default, at least in 2022, the styling of But here, I have added a It's clear to see how this is a child, because of the indentation. A border can also, maybe, perhaps, clarify how deep we are and where we originated from, especially if the tree is long. It's kind of not great that adding the border to the One can put all the children, except for the It feels rather bloated, though, wrapping up everything in yet another layer of divs. Kind of out of scope of this page's point, which is to educate the author in how these work. Nothing much here; the end of the tree. There's also no padding or margin between successive Topologically or mathematically, these trees are written in the source code in pre-order.open
(doesn't even need a value) to a details
element to have it be open by default.
details
element can exist without having a summary
element in it. The standards (and HTML validators) require it, but the lack of one won't crash the browser. In that case, it's up to the browser to choose what text to show where the summary would be. Mine says "Details", regardless of what language the document is written in (there's a lang
attribute on the root html
element).On styling
details
is very bare: there's the triangle, but there's no indentation of the contents. As such, it's a little tough to see what's nested where, and what's a child of what.padding-left
to each of the details
elements that are children (and grandchildren) of this element.First child
Borders in addition to padding
But, on those borders
details
element also adds it to before the arrow and the summary text. It would look better if the border only applied to the contents of the element... but that would need special-casing, and it'd go against how borders work everywhere else.There's a workaround, though
summary
, in a div
and put a border around that.Styling is a headache of its own
Second child
details
elements.External links
details
elementsummary
element (a bit down from the one before)