Using this magical bit of code you can almost effortlessly create an adorable little accordion!
 
This reminds me a bit of the early days of my web dev/design career when I used to code hidden layers of web pages, using DHTML (dynamic html). Only this new way is A LOT easier. And forget about having to wrestle with JavaScript to try to construct an accordion-type toggle thing; there is no need for that, if you are looking for a quick and simple accordion feature.

 
To be totally up-front about this issue of block VS inline html elements, that isn’t really defined or spelled-out any longer with the latest version of HTML5. It’s more of a legacy HTML4 thing, but I still like to keep things straight in my head by classifying tags this way.

The Basics of the HTML5 Details Element

Let’s begin by laying out a baseline for how this tag would appear without any styling applied.
First of all, in the browser (Chrome in my case) it would look like this (click on the arrow):
 

 
Here is the only code necessary to create a very simple, rudimentary accordion/hidden layer effect:
<details>
Hey, this is so COOL! And this was easy to create.
</details>

 
Actually – speaking of clicking the little arrow to display the hidden text – it also works if you click on the “Details” text there, or even the space to the right of that word.
 

Next we’ll add in the summary HTML element (or tag) that usually accompanies the details element:

 
Note how the text after the arrow doesn’t just say “Details” now. This is because we specified some different text to appear there. Without a “summary” added, that text will say “Details” by default. Here is the code again, with the newly added summary element:
 
<details>
<summary>This is text inside of 2 "summary" tags.</summary>
Hey, this is so COOL! And this was easy to create.
</details>
 

Changing the mouse cursor

 
For some reason when hovering the mouse over the little arrow (to the left of the details and/or summary elements), the cursor appears like an arrow. If it floats your boat to have the mouse cursor appear like a pointing hand instead, try adding the CSS code below to your page, in the spot (or targeting the HTML element) that you’d like this effect to appear on.

This is how that little added code snippet would appear in action (hover over the arrow or the area to the right of it):

 
This is the CSS code used to create that effect:

details {
cursor: pointer;
}
 

Displaying the inner summary text in a open state

 
Another cool option is to display the text that’s inside the 2 “p” tags (the hidden area) in an open state, so it’s always visible until you hide it. To achieve this you would stick the “open” attribute after “details” like this:
 
<details open>
<summary>This is a heading for the text that follows:</summary>
<p>Hello there! I'm the text that was just mentioned up above in the summary.</p>
</details>

 
Here is the browser output:

 
You should still be able to click the little arrow to close the summary text.
 

Styling the Text

If you’d like to fancy-up the text inside of the hidden layer, a good option is to enclose your text within two <p> </p> tags.

Now you can go ahead and add some CSS styles directly to the <p> tag. Within your CSS, make sure to nest the “p” element inside of the “details” element; that way your chosen specific styling only gets applied to “p” elements if they are children of (or inside of) the “details” parent element. Otherwise your styles might be applied throughout your entire webpage by affecting anything inside a paragraph. And if you’re working on your site in WordPress, remember that WordPress tends to automatically add “p” tags to lines and paragraphs – even if you didn’t actually set up your html code that way. It adds a bunch of “p” tags when you publish your page whether you like it or not. (kinda rude… ha ha)
 
Anyway… the resulting HTML code might look like the following:
 
<details>
<summary>This is some different text inside of 2 "summary" tags.</summary>
<p>Hey, look at me now - I'm so fancy!</p>
</details>

 
And this is how that code would appear in the browser (click the arrow):

This is the CSS code used to create that effect:

details p {
color: purple;
font-family: "Times New Roman", serif;
font-size: 20px;
}
 

Making your summary text bold

 
The inner text inside of these summary tags is made bold by wrapping the “strong” HTML tags around it, as follows:
 
<details open>
<summary>This is a heading for the text that follows:</summary>
<p><strong>I'm some text in a summary that is bold for emphasis.</strong></p>
</details>

You can also use the html span element to nest your text inside if you wish. Then you can either style the span element itself or (for even more control), you could add a CSS class or ID to the span element. This example below uses an ID to style the summary text, inside of 2 span tags:
 

 
Here is the html for the above tiny accordion-like doohicky:
<details>
<summary>Click me to see how my text looks!:</summary>
<span id="fancyText">I'm some text inside of 2 "span" tags using an ID.</span>
</details>

 
And here is the little bit of CSS code used to create those styles:

#fancyText {
color: teal;
font-family: "Calibri", sans-serif;
font-size: 26px;
}
 

Adding a splash of color behind the text

 
The html for the above looks like this:
 
<details>
<summary>This is a heading for the text inside my hidden area (click on me)... </summary>
<span id="backgroundColor1">I'm some text with a differently-colored background.</span>
</details>

 
And here is the little bit of CSS code used to create those styles:

#backgroundColor1 {
background-color: pink;
font-family: "Garamond", serif;
font-size: 24px;
color: black;
}

 
You can also add a splash of color behind the visible heading text. This example below uses an ID to style the details element itself:
 

 
Note how the background blue color stretches out across the entire area and doesn’t stop after the last letter. Another interesting thing is how the tiny arrow has been changed from black to white along with the text color.

Here is the html for the above:

<details id="backgroundColor2">
<summary>Here is text with a background color.</summary>
<span>Doesn't this color make the white text above stand out nicely?</span>
</details>

 
And here is the CSS code used to create those styles:

backgroundColor2 {
background-color: #2A87FF;
font-family: "Verdana", sans-serif;
font-size: 18px;
color: white;
padding: 5px;
}

 
This example has a small amount of padding thrown in for good measure.

One last thing I’d like to point out is how our newly added background color gets applied to the ENTIRE area (not just the top heading area). This is because all of it is enclosed within the 2
<details> </details> tags.

 
Well, that’s about it for now – but before you go, please check out our follow-up article on how to apply more advanced styles to the DETAILS and/or SUMMARY html tags. And if you love playing around with the HTML coding language as much as we do, you might want to read our article on Creative Ways to Style an HTML HR Tag.
 

 
Please share this article if you like it, and let us know in the comments if you’d like to learn more about the these (or any other) html tags. Thank you for reading!
 
 

Tags: how do you style a details tag?html details elementhtml details tag stylehtml summary tag stylestyling the details and summary elements