As we discussed in our last article How to Style the HTML Details and Summary Tags, the details tag (or “element”) can be used on its own, or combined with the summary tag. This combination of HTML tags is called a disclosure widget and acts like a simple accordion that the user can open if they wish to view more information. Coding this little widget is so simple, yet it is incredibly useful! This is an excellent way to keep your web pages or posts clean and uncluttered without sacrificing going into more detail for your readers, if they choose to learn more about something.

Setting up your Code for the HTML5 Details and Summary Elements

 
Let’s begin by laying out a baseline for how the details and summary tags would appear when used together, and without any styling applied.
 

Here is the only code you need to create a very simple, basic accordion/hidden-layer widget:

<details>
<summary>This is text inside of 2 "summary" tags.</summary>
Here is a paragraph of text that will appear when someone clicks on the small arrow. This is a quick and easy way to create a "Learn More" or "More Info" type of widget area.
</details>

 
In the browser (Chrome on Windows in my case) this widget would appear like this (click on or touch the arrow):

For more info on how to do some basic, less advanced coding and styling with the html details and summary tags, we have another article on that subject that should help you get started with the fundamentals.

Next we’ll add in various combinations of styles using some CSS!

Adding a Drop Shadow

 
If you wrap a holding-type of container around your text, that will give you an easy way to apply some CSS code to it. This would work using tags such as <p>, <div> or <span>. I prefer to use the <div> or <span> tags and then assign them specific CSS classes or IDs. If you try to add style directly to certain html element directly – for example by applying styles to the <p> tag, there’s a good chance your styling will affect all areas of your page and not be confined to one specific area (as “p” tags are usually found throughout entire web pages).
 
Anyway, a nice effect to start out with would be add a drop shadow to your text, with a splash of color thrown in for good measure. In the example below I also enlarged the text size a bit. This is how the HTML might look in that case:
 
<details>
<summary>This is some different text inside of 2 "summary" tags.</summary>
<span id="shadowText1">Here is some text with a lovely drop shadow and a splash of color.</span>
</details>

 
And this is how that code would appear in the browser:

This is the CSS code used to create that effect:

#shadowText1 {
font-size: 26px;
text-shadow: 3px 3px 5px;
color: purple;
}
 

 
This example displays a drop shadow surrounding the box that the “summary” text sits inside of, with some background color added:

 
This is the CSS code used to create that effect:

#shadowText2 {
box-shadow: 5px 5px 7px;
background-color: beige;
}
 
The only change to the HTML in the above example was adding a CSS ID to the “summary” element instead of the “span” element:
<summary id="shadowText2">This text sits inside the 2 "summary" tags.</summary>

This example displays a drop shadow surrounding the entire “details” area that the text sits inside of (with some background color and padding added):

This is the CSS code used to create that effect:

#shadowText3 {
box-shadow: 5px 5px 7px;
background-color: #BCDCF2;
padding: 8px;
}
 
The only change to the HTML in the above example was adding a CSS ID to the “details” element instead of the “span” element:
<details id="shadowText3"> </details>

Playing Around with Color

This example shows how a colorful gradient would look when applied to the hidden text:

This is the CSS code used to create that effect:

#textColor1 {
font-size: 25px;
font-weight: bold;
background-color: #BF891C; /* this is in case the browser doesn’t support CSS gradients */
background-image: linear-gradient(25deg, #BF891C, #3C00F2, #16130F, #660099, white);
background-size: 100%;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
 
The only change to the HTML in the above example was changing the CSS ID that I had previously added to the “span” element:
<span id="textColor1">Expand me to see the colors!</span>

This is an example of applying a gradient to the area surrounding the text (with the fade going in one direction), then applying another gradient to the text itself:

This is the CSS code used to create that effect:

#textColor2 {
background-image: linear-gradient(10deg, #0033FF, #9999FF, white);
color: white;
padding: 12px;
}
#textColor3 {
background-image: linear-gradient(to right, white, gray, black);
font-size: 24px;
font-weight: bold;
color: black;
background-repeat: repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-moz-background-clip: text;
-moz-text-fill-color: transparent;
}
 
In the above example I added a CSS ID to the details and summary elements, respectively.

Adding a Dash of Animation

 
The follow animation examples were created using CSS keyframes. Keyframes are an excellent way to add animations to your posts or pages – without having to use jQuery or JavaScript or get into any real heavy coding. Here is one of our previous articles on how to get started with CSS keyframes if you’re curious about that subject.
 

 
In the above example the usual “span” tag was replaced with a “div” tag and a CSS ID was added to it. The animation worked ok using “span” but for some reason the placement of the green area was incorrect (it was moved up and overlapping the upper area with the black text). But switching to a “div” tag fixed that… it must have something to do with “span” being an inline element and “div” being a block element.
Anyhoo… the HTML for that animated accordion effect is as follows:
 
<details>
<summary>Click the arrow to see the first animation.</summary>
<div id="animateThis1">See how I fade in nice and slowly...</div>
</details>

 
This is the CSS code used to create the above effect:

#animateThis1 {
padding: 10px;
color: white;
font-family: "Garamond", serif;
font-size: 24px;
animation-duration: 5s;
animation-name: fadeIn1;
background-color: #8DAF85;
animation-timing-function: ease-in;
}
@keyframes fadeIn1 {
0% {
opacity: 0;
}
25% {
opacity: 0.2;
}
50% {
opacity: 1;
}
75% {
opacity: 1;
}
100% {
opacity: 1;
}
}

 
 
<details>
<summary>Click the arrow to see the second animation.</summary>
<div id="animateThis2">I'm floating... weee, this is fun!</div>
</details>

This is the CSS code used to create the second animation effect:

#animateThis2 {
padding: 10px;
animation-duration: 5s;
animation-name: fadeIn2;
background-color: #8DAF85;
animation-timing-function: ease-in-out;
width: 69%;
height: 30px;
position: relative;
color: white;
font-size: 19px;
}
@keyframes fadeIn2 {
0% {
opacity: 0;
left:0px; top:0px;
}
25% {
opacity: 0.2;
left:0px; top:10px;
}
50% {
opacity: 1;
left:0px; top:30px;
}
75% {
opacity: 1;
left:0px; top:60px;
}
100% {
opacity: 1;
left:0px; top:100px;
}
}

 
This accordion widget example is a little different from the rest because I slapped a tiny bit of inline CSS onto the “summary” element, to make it less wide. If you don’t tell them to otherwise, the details and summary elements with span across the entire width of your page. I added a bit of CSS as follows: <summary style="width:72%;">

 
One more thing I’d like to point out: the second animation didn’t work until I added position: relative; to it. In order for any element on the page to move up or down (or in any direction) it needs to know where it is in space relative to the placement of the other elements of the page (or html document). Without that information your animation won’t have a place to start from or know where to start from. You might want to check out this tutorial from W3schools for more info on relative VS absolute positioning in CSS.

 
Well, that’s about it for now – please check back soon for more ideas on how to be creative with CSS and HTML! 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/elements. Thank you for reading!
 
 

Tags: details and summary html elementsstyling details with CSSstyling the details tagstyling the summary tag