How to create an accordion in HTML5?

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 :

Advertisements

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