{"id":325866,"date":"2020-11-26T07:11:11","date_gmt":"2020-11-26T15:11:11","guid":{"rendered":"https:\/\/css-tricks.com\/?p=325866"},"modified":"2020-11-26T07:11:13","modified_gmt":"2020-11-26T15:11:13","slug":"exploring-what-the-details-and-summary-elements-can-do","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/exploring-what-the-details-and-summary-elements-can-do\/","title":{"rendered":"Exploring What the Details and Summary Elements Can Do"},"content":{"rendered":"\n<p>We\u2019ve mentioned before just how great the <code>&lt;details&gt;<\/code> and <code>&lt;summary&gt;<\/code> elements are. They\u2019re great for quickly <a href=\"https:\/\/css-tricks.com\/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion\/\">making accordions<\/a> that are accessible to touch, mouse, and keyboard input:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_jzmjPJ\" src=\"\/\/codepen.io\/anon\/embed\/jzmjPJ?height=250&amp;theme-id=1&amp;slug-hash=jzmjPJ&amp;default-tab=result\" height=\"250\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed jzmjPJ\" title=\"CodePen Embed jzmjPJ\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p><code>&lt;details&gt;<\/code> and <code>&lt;summary&gt;<\/code> can even be used to <a href=\"https:\/\/css-tricks.com\/pause-gif-details-summary\/\">play\/pause gifs<\/a>! Click the pause button in the top right of this image to see it in action:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_pogQJER\" src=\"\/\/codepen.io\/anon\/embed\/pogQJER?height=450&amp;theme-id=1&amp;slug-hash=pogQJER&amp;default-tab=result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed pogQJER\" title=\"CodePen Embed pogQJER\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Neat, eh? But what else can these elements do? For a long while, I\u2019ve only thought about <code>details<\/code> as a way to make accordions. But the other day I started thinking about it a little bit, and the first thing I realized was maybe we could make better footnotes with them.<\/p>\n\n\n\n<p>Here\u2019s we typically make footnotes today with just HTML:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_f7948ea36e02a0af7ea548e423792671\" src=\"\/\/codepen.io\/anon\/embed\/f7948ea36e02a0af7ea548e423792671?height=450&amp;theme-id=1&amp;slug-hash=f7948ea36e02a0af7ea548e423792671&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed f7948ea36e02a0af7ea548e423792671\" title=\"CodePen Embed f7948ea36e02a0af7ea548e423792671\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Clicking a link in a paragraph it pushes you to the bottom of the page where the description of the footnote is. And we do that by linking to the ID of elements back and forth. But! There are jQuery plugins like <a href=\"http:\/\/www.bigfootjs.com\/\" rel=\"noopener\">BigFoot<\/a> out there that let you have footnotes inline. <\/p>\n\n\n\n<p>Here\u2019s that same example with the BigFoot script and jQuery applied to it:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_c4cc43d15642955cccdcd3b50a489881\" src=\"\/\/codepen.io\/anon\/embed\/c4cc43d15642955cccdcd3b50a489881?height=400&amp;theme-id=1&amp;slug-hash=c4cc43d15642955cccdcd3b50a489881&amp;default-tab=result\" height=\"400\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed c4cc43d15642955cccdcd3b50a489881\" title=\"CodePen Embed c4cc43d15642955cccdcd3b50a489881\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Neat huh? BigFoot takes our accessible markup, removes all that link stuff, and throws it right inline as a little button and tooltip thing.<\/p>\n\n\n\n<p>But what if we could use <code>&lt;details&gt;<\/code> and <code>&lt;summary&gt;<\/code> to replace this jQuery and plain ol\u2019 HTML for our footnotes? Well, sadly, we can\u2019t. If you try to place either of these elements within a <code>&lt;p&gt;<\/code> tag, browsers render those elements outside the <code>&lt;p&gt;<\/code> element:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_7708a64726b423851282ce43c3bc2942\" src=\"\/\/codepen.io\/anon\/embed\/7708a64726b423851282ce43c3bc2942?height=450&amp;theme-id=1&amp;slug-hash=7708a64726b423851282ce43c3bc2942&amp;default-tab=html,result\" height=\"450\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 7708a64726b423851282ce43c3bc2942\" title=\"CodePen Embed 7708a64726b423851282ce43c3bc2942\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Blah! This is annoying but I sorta get why it works like this. It would be great if we could replace the complexity of all these links and the crappy experience of hopping up and down the page. But we can\u2019t.<\/p>\n\n\n\n<p>Well, if we can\u2019t do that, then what else can we use <code>&lt;details&gt;<\/code> and <code>&lt;summary&gt;<\/code> for? This had me thinking\u2026 what about tooltips? Well, yes! We can absolutely do that. Let\u2019s say that we have some markup like this that expands the date shown:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_2d91690944f6a29254257418be58647c\" src=\"\/\/codepen.io\/anon\/embed\/2d91690944f6a29254257418be58647c?height=300&amp;theme-id=1&amp;slug-hash=2d91690944f6a29254257418be58647c&amp;default-tab=html,result\" height=\"300\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 2d91690944f6a29254257418be58647c\" title=\"CodePen Embed 2d91690944f6a29254257418be58647c\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>Pretty standard, we\u2019ve seen this before. But now let\u2019s get to the styling which is the interesting bit. First up, we need to tackle the <code>&lt;details&gt;<\/code> element:<\/p>\n\n\n\n<pre rel=\"SCSS\" class=\"wp-block-csstricks-code-block language-scss\" data-line=\"\"><code markup=\"tt\">details {\n  border-radius: 3px;\n  cursor: pointer;\n  display: inline-block;\n  position: relative;\n  transition: 0.15s background linear;\n}\n\ndetails:hover,\ndetails:focus {\n  background: #d4d1ec;\n}<\/code><\/pre>\n\n\n\n<p>This lets us absolutely position the information within our details element but it also lets the tooltip feel a bit more like a button on click with the background. Next, we can undo the default arrow for the <code>summary<\/code> element by doing this:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">summary {\n  background: url(\"https:\/\/assets.codepen.io\/14179\/Info.svg\") 11px 11.5px no-repeat;\n  list-style: none;\n  padding: 10px;\n  padding-left: 33px;\n}<\/code><\/pre>\n\n\n\n<p>And finally, we need to absolutely position the paragraph that we have within the <code>details<\/code> element. And make a tiny little triangle that points up to the rest of the tooltip:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">details p {\n  cursor: auto;\n  background: #eee;\n  padding: 15px;\n  width: 250px;\n  position: absolute;\n  left: 0;\n  top: 35px;\n  border-radius: 4px;\n  right: 0;\n}\n\n\/\/ Tiny triangle that points up\ndetails p:before {\n  content: \"\";\n  border-bottom: 12px solid #eee;\n  border-left: 8px solid transparent;\n  border-right: 8px solid transparent;\n  height: 0;\n  left: 10px;\n  position: absolute;\n  top: -10px;\n  width: 0;\n}<\/code><\/pre>\n\n\n\n<p>Which leads to something like this. Make sure to click the tooltip to see the description appear beneath it:<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_32b26a9c8dc28978ce326cc0f122934a\" src=\"\/\/codepen.io\/anon\/embed\/32b26a9c8dc28978ce326cc0f122934a?height=350&amp;theme-id=1&amp;slug-hash=32b26a9c8dc28978ce326cc0f122934a&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed 32b26a9c8dc28978ce326cc0f122934a\" title=\"CodePen Embed 32b26a9c8dc28978ce326cc0f122934a\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<p>One nice thing we can do here to polish things up a tiny little bit is to add an animation when the tooltip is open:<\/p>\n\n\n\n<pre rel=\"CSS\" class=\"wp-block-csstricks-code-block language-css\" data-line=\"\"><code markup=\"tt\">details[open] p {\n  animation: animateDown 0.2s linear forwards;\n}\n\n@keyframes animateDown {\n  0% {\n    opacity: 0;\n    transform: translatey(-15px);\n  }\n  100% {\n    opacity: 1;\n    transform: translatey(0);\n  }\n}<\/code><\/pre>\n\n\n\n<p>And there you have it! If you click the tooltip it\u2019ll pop open and if you tab and click space then it\u2019ll open up, too.<\/p>\n\n\n\n<p>But we can take this a <em>little<\/em> further. Something we probably don\u2019t want is a bunch of these tooltips opening up all over the place. If we\u2019re using tooltips heavily then that could get super clumsy and visually distracting. What we need to do is close the tooltip when we click outside of it. And we can do that with some light JavaScript:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">const tooltip = document.querySelector(\".tooltip\");\n\ndocument.addEventListener(\"click\", function (e) {\n  var insideTooltip = tooltip.contains(e.target);\n\n  if (!insideTooltip) {\n    tooltip.removeAttribute(\"open\");\n  }\n});<\/code><\/pre>\n\n\n\n<p>Now when you click off the tooltip it\u2019ll close it. Neato!<\/p>\n\n\n\n<div class=\"wp-block-cp-codepen-gutenberg-embed-block cp_embed_wrapper\"><iframe id=\"cp_embed_c80891a45a0445735ec19c650e60a5e1\" src=\"\/\/codepen.io\/anon\/embed\/c80891a45a0445735ec19c650e60a5e1?height=350&amp;theme-id=1&amp;slug-hash=c80891a45a0445735ec19c650e60a5e1&amp;default-tab=result\" height=\"350\" scrolling=\"no\" frameborder=\"0\" allowfullscreen allowpaymentrequest name=\"CodePen Embed c80891a45a0445735ec19c650e60a5e1\" title=\"CodePen Embed c80891a45a0445735ec19c650e60a5e1\" class=\"cp_embed_iframe\" style=\"width:100%;overflow:hidden\">CodePen Embed Fallback<\/iframe><\/div>\n\n\n\n<hr class=\"wp-block-separator\"\/>\n\n\n\n<p>The <code>&lt;details&gt;<\/code> and <code>&lt;summary&gt;<\/code> elements can\u2019t do everything but they can certainly do a lot of handy things \u2014 and I reckon that there\u2019s a lot more this combination of elements can do. We just have to go find them. In fact, here are some more great posts on the topic.<\/p>\n\n\n\n    \t\t\n    <div class=\"in-article-cards\">\n      <article class=\"in-article-card article\" id=\"mini-post-325866\">\n\n  <time datetime=\"2020-02-14\" title=\"Originally published Nov 26, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Feb 14, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/creating-a-details-element-that-opens-but-never-closes\/\">\n      Creating a Details Element That Opens But Never Closes    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/details-summary\/\" rel=\"tag\">details\/summary<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/footnotes\/\" rel=\"tag\">footnotes<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/tooltip\/\" rel=\"tag\">tooltip<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-325866\">\n\n  <time datetime=\"2020-11-05\" title=\"Originally published Nov 26, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Nov 5, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/how-to-animate-the-details-element-using-waapi\/\">\n      How to Animate the Details Element Using WAAPI    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/details-summary\/\" rel=\"tag\">details\/summary<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/footnotes\/\" rel=\"tag\">footnotes<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/tooltip\/\" rel=\"tag\">tooltip<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/louishoebregts\/\" aria-label=\"Author page of Louis Hoebregts\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/6dc6baa4357590d186c93044b3d1b9fc?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/6dc6baa4357590d186c93044b3d1b9fc?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/louishoebregts\/\">\n      Louis Hoebregts    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-325866\">\n\n  <time datetime=\"2020-07-22\" title=\"Originally published Nov 26, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Jul 28, 2020  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/pause-gif-details-summary\/\">\n      Pausing a GIF with details\/summary    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/details-summary\/\" rel=\"tag\">details\/summary<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/footnotes\/\" rel=\"tag\">footnotes<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/tooltip\/\" rel=\"tag\">tooltip<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-325866\">\n\n  <time datetime=\"2019-03-21\" title=\"Originally published Nov 26, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 21, 2019  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/using-details-for-menus-and-dialogs-is-an-interesting-idea\/\">\n      Using &lt;details> for Menus and Dialogs is an Interesting Idea    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/details-summary\/\" rel=\"tag\">details\/summary<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/footnotes\/\" rel=\"tag\">footnotes<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/tooltip\/\" rel=\"tag\">tooltip<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n<article class=\"in-article-card article\" id=\"mini-post-325866\">\n\n  <time datetime=\"2018-03-28\" title=\"Originally published Nov 26, 2020\">\n    <strong>\n                \n        Article\n      <\/strong>\n\n    on\n\n    Mar 7, 2022  <\/time>\n\n  <h3>\n    <a href=\"https:\/\/css-tricks.com\/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion\/\">\n      Quick Reminder that Details\/Summary is the Easiest Way Ever to Make an Accordion    <\/a>\n  <\/h3>\n\n  \n      <div class=\"tags\">\n      <a href=\"https:\/\/css-tricks.com\/tag\/details-summary\/\" rel=\"tag\">details\/summary<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/footnotes\/\" rel=\"tag\">footnotes<\/a> <a href=\"https:\/\/css-tricks.com\/tag\/tooltip\/\" rel=\"tag\">tooltip<\/a>    <\/div>\n  \n  <div class=\"author-row\">\n    <a href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\" aria-label=\"Author page of Chris Coyier\">\n      <img alt='' src='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=80&#038;d=retro&#038;r=pg' srcset='https:\/\/secure.gravatar.com\/avatar\/8081b26e05bb4354f7d65ffc34cbbd67?s=160&#038;d=retro&#038;r=pg 2x' class='avatar avatar-80 photo' height='80' width='80' \/>    <\/a>\n  \n    <a class=\"author-name\" href=\"https:\/\/css-tricks.com\/author\/chriscoyier\/\">\n      Chris Coyier    <\/a>\n  <\/div>\n\n<\/article>\n    <\/div>\n  \n","protected":false},"excerpt":{"rendered":"<p>We\u2019ve mentioned before just how great the &lt;details&gt; and &lt;summary&gt; elements are. They\u2019re great for quickly making accordions that are accessible to touch, mouse, and keyboard input: &lt;details&gt; and &lt;summary&gt; can even be used to play\/pause gifs! Click the pause button in the top right of this image to see it in action: Neat, eh? [&hellip;]<\/p>\n","protected":false},"author":223806,"featured_media":325989,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[1393,11523,502],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/details-tooltip.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":13503,"url":"https:\/\/css-tricks.com\/the-details-and-summary-elements\/","url_meta":{"origin":325866,"position":0},"title":"The details and summary elements","date":"August 9, 2011","format":false,"excerpt":"Tom Leadbetter from HTML5 doctor shows us all about the summary and details element. I think this will be a particularly useful pair of elements, especially as browser support grows, with its baked in hide\/show functionality.","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":373372,"url":"https:\/\/css-tricks.com\/more-details-on-details\/","url_meta":{"origin":325866,"position":1},"title":"More Details on `details`","date":"September 15, 2022","format":false,"excerpt":"A lot of chatter around the ol' <details> and <summary> elements lately! I saw Lea Verou recently tweet an observation about the element's display behavior and that sorta splintered into more observations and usage notes from folks, including a revived discussion on whether <summary> should be allowed to contain interactive\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/details-box.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":332360,"url":"https:\/\/css-tricks.com\/two-issues-styling-the-details-element-and-how-to-solve-them\/","url_meta":{"origin":325866,"position":2},"title":"Two Issues Styling the Details Element and How to Solve Them","date":"January 13, 2021","format":false,"excerpt":"In the not-too-distant past, even basic accordion-like interactions required JavaScript event listeners or some CSS\u2026 trickery. And, depending on the solution used, editing the underlying HTML could get complicated. Now, the <details> and <summary> elements (which combine to form what\u2019s called a \u201cdisclosure widget\u201d) have made creation and maintenance of\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/details-summary-issues.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":268649,"url":"https:\/\/css-tricks.com\/quick-reminder-that-details-summary-is-the-easiest-way-ever-to-make-an-accordion\/","url_meta":{"origin":325866,"position":3},"title":"Quick Reminder that Details\/Summary is the Easiest Way Ever to Make an Accordion","date":"March 28, 2018","format":false,"excerpt":"Gosh bless the\u00a0<details>\u00a0element. Toss some content inside it and you have an accessible expand-for-more interaction with just about zero work. CodePen Embed Fallback Toss a\u00a0<summary>\u00a0in there to customize what the expander text says. CodePen Embed Fallback Works great for FAQs. https:\/\/videopress.com\/v\/RQHByZSz?resizeToParent=true&cover=true&preloadContent=metadata&useAverageColor=true There is really no limit to how you can\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/accordion.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":303614,"url":"https:\/\/css-tricks.com\/creating-a-details-element-that-opens-but-never-closes\/","url_meta":{"origin":325866,"position":4},"title":"Creating a Details Element That Opens But Never Closes","date":"February 14, 2020","format":false,"excerpt":"The <details> and <summary> elements in HTML are useful for making content toggles for bits of text. By default, you see the <summary> element with a toggle triangle (\u25b6\ufe0e) next to it. Click that to expand the rest of the text inside the <details> element. But let's say you want\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/03\/accordion.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":351915,"url":"https:\/\/css-tricks.com\/shadow-roots-and-inheritance\/","url_meta":{"origin":325866,"position":5},"title":"Shadow Roots and Inheritance","date":"September 16, 2021","format":false,"excerpt":"There is a helluva gotcha with styling a <details> element, as documented here by Kitty Giraudel. It's obscure enough that you might never run into it, but if you do, I could see it being very confusing (it would confuse me, at least). Perhaps you're aware of the shadow DOM?\u2026","rel":"","context":"In &quot;Link&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/09\/Screen-Shot-2021-09-15-at-3.57.50-PM.png?fit=1200%2C717&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/details-tooltip.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325866"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=325866"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325866\/revisions"}],"predecessor-version":[{"id":326389,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/325866\/revisions\/326389"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/325989"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=325866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=325866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=325866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}