<\/p>\n\n\n\n
The The result looks like this:<\/p>\n\n\n\n This is my secret hidden information!<\/p>\n<\/details>\n<\/div>\n\n\n\n This is exactly the foundation we need to create interactive dropdowns like FAQs, or organize information like on a Wikipedia page. The Use a Semantically, By default, The result loads like this:<\/p>\n\n\n\n This information is NOT secret.<\/p>\n<\/details>\n<\/div>\n\n\n\n This is handy for things like instructions at the top of a form. Display them upfront, but let the user collapse them once they’ve read enough.<\/p>\n\n\n\n As of 2024, you can use the The results behave like this:<\/p>\n\n\n\n This information is NOT secret.<\/p>\n<\/details> This information IS secret.<\/p>\n<\/details>\n<\/div>\n\n\n\n This is particularly useful for lengthy content, keeping content tidy as users browse.<\/p>\n\n\n\n To style individual parts of the element without adding classes or IDs, use these pseudo-elements:<\/p>\n\n\n\n Use Edge and Chrome-based browsers already support simply adding Alternatively, a workaround in the mean time is animating all the content that comes after <\/em>the summary instead of targeting the Zach Leatherman (@zachleat<\/a> on GitHub) created an open source web component called You can link it into your HTML the same way you’d include any external script or font library. Full details on his blog: zachleat.com\/web\/details-utils\/<\/a><\/p>\n\n\n\n This is worth exploring if you’re using Details start closed<\/strong> by default; add Nearly every part of Animation support is still catching up across browsers \u2014 use keyframe workarounds in the meantime <\/p>\n\n\n\n Structuring this element is being actively streamlined, so it’s worth staying current and checking browser support for newer features like documentation<\/p>\n\n\n\n articles<\/p>\n\n\n\n inspo<\/p>\n\n\n\n <\/p>\n","protected":false},"excerpt":{"rendered":" anatomy of the <details> element The <details> element has two parts: a <summary> and content. The result looks like this: This is my summary! This is my secret hidden information! This is exactly the foundation we need to create interactive dropdowns like FAQs, or organize information like on a Wikipedia page. The <summary> is the […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-150","post","type-post","status-publish","format-standard","hentry","category-assignments"],"_links":{"self":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts\/150","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/comments?post=150"}],"version-history":[{"count":9,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts\/150\/revisions"}],"predecessor-version":[{"id":162,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/posts\/150\/revisions\/162"}],"wp:attachment":[{"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/media?parent=150"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/categories?post=150"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/madebymolly.uk\/journal\/wp-json\/wp\/v2\/tags?post=150"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<details><\/code> element has two parts: a <summary><\/code> and content.<\/p>\n\n\n\n<details>\n <summary>This is my summary!<\/summary>\n <p>This is my secret hidden information!<\/p>\n<\/details><\/code><\/code><\/pre>\n\n\n\n
\n\n\n\nThis is my summary!<\/summary>\n
<summary><\/code> is the always-visible label that the user clicks to expand. Everything else inside <details><\/code> is the hidden content that appears on click. <\/p>\n\n\n\n<p><\/code> or <span><\/code> for content. Headings inside <details><\/code> should be avoided, but if you need to use one inside a <summary><\/code>, set it to display: inline<\/code> to avoid spacing issues.<\/p>\n\n\n\n<details><\/code> should only be used to collapse information elegantly. It’s not a substitute for navigation menus, footnotes, or other elements that already have proper HTML equivalents.<\/p>\n\n\n\nopen vs. closed<\/h2>\n\n\n\n
<details><\/code> loads as collapsed. However, we can adjust that, using the open <\/code>attribute selector.<\/p>\n\n\n\n<details open>\n <summary>This is my summary!<\/summary>\n <p>This information is NOT secret.<\/p>\n<\/details><\/code><\/pre>\n\n\n\n
\n\n\n\nThis is my summary!<\/summary>\n
exclusivity<\/h2>\n\n\n\n
name<\/code> attribute to create a group of dropdowns where only one can be open at a time. When one opens, any other with the same name <\/code>automatically closes.<\/p>\n\n\n\n<details name=\"exclusive\" open>\n <summary>First item<\/summary>\n <p>This information is NOT secret.<\/p>\n<\/details>\n\n<details name=\"exclusive\">\n <summary>Second item<\/summary>\n <p>This information IS secret.<\/p>\n<\/details><\/code><\/pre>\n\n\n\n
\n\n\n\nFirst item<\/summary>\n
\n\nSecond item<\/summary>\n
styling with css<\/h2>\n\n\n\n
<details><\/code> accepts standard CSS just like any other element \u2014 background colours, borders, max-width, and so on. <\/p>\n\n\n\n\n
details summary<\/code> \u2014 the summary element itself<\/li>\n\n\n\nsummary::marker<\/code> \u2014 the little disclosure triangle<\/li>\n\n\n\nsummary::after<\/code> \u2014 useful for adding custom text or icons<\/li>\n\n\n\ndetails::details-content<\/code> \u2014 the expanded content area (new as of September 2025; may still have Safari issues)<\/em><\/li>\n<\/ul>\n\n\n\nsummary::after<\/code><\/strong> when adding toggle arrows, icons, or swappable text. Use details::details-content<\/code><\/strong> when styling the expanded section, or adding padding and backgrounds to the content container. See demos 4, 5, and 6 here<\/a> to see it in action. <\/strong><\/p>\n\n\n\nanimating <details><\/h2>\n\n\n\n
transition <\/code>and animate <\/code>line items to CSS for <details><\/code>, but Firefox and Safari have yet to implement. It still is worth including these in your CSS, though, because even though your content will still statically snap open and shut on Firefox and Safari right now, when the browser support is added, it will immediately start working.<\/p>\n\n\n\n <details> <\/code>element directly.<\/p>\n\n\n\ndetails[open] summary ~ * {\n animation: open 0.3s ease-in-out;\n}\n\n@keyframes open {\n from { opacity: 0; transform: translateY(-10px); }\n to { opacity: 1; transform: translateY(0); }\n}<\/code><\/pre>\n\n\n\nbonus: <details-utils><\/h2>\n\n\n\n
<details-utils><\/code> that wraps your <details><\/code> element and adds a suite of useful behaviours with no extra JavaScript to write yourself:<\/p>\n\n\n\n\n
<details><\/code> for something substantial, like a site-wide FAQ.<\/p>\n\n\n\nrecap<\/h2>\n\n\n\n
summary<\/code> and content = details<\/code><\/p>\n\n\n\nopen<\/code> to start expanded, or name=\"group\"<\/code> for mutually exclusive dropdowns <\/p>\n\n\n\n<details><\/code> is customisable with CSS <\/p>\n\n\n\n::details-content<\/code><\/p>\n\n\n\nresources<\/h2>\n<\/div>\n\n\n\n
\n
\n
\n