Creating an accordion got easier in HTML5.
You don’t need to use div element and javascript anymore.
You just need to use the <details> element.
The label in the accordion can be represented using <summary> element nested inside the <details> element and the data inside the accordion can then be represented using <p> (paragraph) element or other elements.
Here is an example:
<details>
<summary>The Full Stack</summary>
<p>HTML
<p>CSS
<p>Javascript
<p>Java
<p>MySQL
</details>
Here is how it looks before expanding the accordion:

After expanding the accordion:

If you want the accordion to be expanded by default you can use the boolean attribute “open” inside the details tag.
<details open>
<summary>The Full Stack</summary>
<p>HTML
<p>CSS
<p>Javascript
<p>Java
<p>MySQL
</details>
Now let’s apply some styling using CSS and check.
Here is the CSS :
<style>
details {
font: 20px Calibri;
width: 750px;
margin-left: 20px;
}
details > summary {
padding: 2px 6px;
width: 15em;
background-color: lightblue;
border: none;
box-shadow: 3px 3px 4px green;
cursor: pointer;
transition : color 1s;
}
details > p {
background-color: lightblue;
padding: 2px 6px;
margin: 2px;
box-shadow: 3px 3px 4px green;
}
details[open] > summary { color: blue;}
</style>
And here is the output :


What if you want “+” symbol instead of the default arrow symbol?
You can achieve it using CSS.
The pseudo class -webkit-details-marker contains the arrow symbol. Override it as none using the display attribute.
Then add the “+” symbol using content attribute inside “summary” element.
When the summary element opens use the content “-“.
Use the above two with the pseudo CSS element “after”
Here is a sample CSS:
<style>
summary::-webkit-details-marker {
display: none
}
summary:after {
background: blue;
content: "+";
float: left;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
}
</style>
Here is how it looks:


What if you want the expand icon on the right?
Just change the value of the float attribute to “right” under summary:after element in the previous example:
<style>
details {
width: 500px;
}
summary::-webkit-details-marker {
display: none
}
summary:after {
background: blue;
content: "+";
float: right;
font-size: 1.5em;
font-weight: bold;
margin: -5px 10px 0 0;
text-align: center;
width: 20px;
}
details[open] summary:after {
content: "-";
}
</style>
I have also changed the width of the accordion above to make it smaller.
Here is how it looks:

On expanding:

That’s it!
Ref: http://html5doctor.com/the-details-and-summary-elements/
Leave a Reply