#30DaysofHTML Day 6: <details > and <summary >

You can't have a <summary > without <details >

and

Apr 06, 2021

<details> is a wrapper for a <summary> sentence or term and its longer explanation that begins collapsed. By clicking on a triangle next to the summary, we reveal a longer explanation.

🪗 It's the EASIEST WAY TO MAKE AN ACCORDION MENU! 🪗

True, animation effects to smooth out the transition are not available, but in a pinch, we think you'll find you love this tag as much as we do! 💕

Example

The details/summary combination is perfect for information similar to a definition list, but which might have a series of items that stand alone, rather than grouped in list format:

<details>
   <summary>Reading the fine print</summary>
   <p>This is where we hide all of the secret terms and conditions. Your mileage may vary.</p> 
</details>

The <summary> element is optional. Without it, you'll get the default clickable text which says "details." The <summary> element must also be the first child of <details>. Include it as the very first thing inside the <details> element.

Styling choices

Both <summary> and <details> may be easily styled using CSS.

And somewhat surprisingly, the little triangle that controls if the details are being hidden or shown CAN be swapped out with CSS.

In this example from CSS-Tricks, Chris Coyier replaces the triangle with an arrow. Unfortunately, there does not appear to be a way to convincingly animate the new image choice from the open to the closed position.

summary {
   list-style-image: url(right-arrow.svg);
}  
summary::-webkit-details-marker {
   background: url(right-arrow.svg);
   color: transparent; 
}

In a later CSS-Tricks article, Robin Rendle styles <summary> and <details> to play animated GIFs and have lovely tooltip effects.

Little known facts about <details> and <summary>

⛔️ The details element is not appropriate for footnotes. Seems like it would be a great fit, but unfortunately, it's not. See WHATWG for more information.

⛔️ There is currently no way to control the animation between the summary being hidden and revealed.

✅ The <summary> element is used nowhere else in HTML. It may only be used with <details> and only as a first-child of <details>. How's that for a specific element?

Common attributes

By including the open attribute in the <details> element, the element will appear open by default on the page, rather than closed:

<details open>
   <summary>About My Life</summary>
   <p>My life is as open as this details panel.</p> </details>

When a summary is opened, an open attribute is added to details. This attribute may be used to style each state. The below example is from WHATWG:

details > summary {
     transition: color 1s;
     color: black;  
} 
details[open] > summary {
     color: red;  
}

<details> and <summary> demo

🖥 View the <details> and <summary> demo on CodePen. We’ve got HTML AND CSS examples today!

View the CodePen example

Challenge: Using <details> and <summary>

👩🏽‍💻 Try today’s CodePen Challenge about the use of <details> and <summary>. When you’ve completed it, post your answer in our discussion in Substack.

Take the CodePen Challenge