Dev beginners, learn to use <details> and <summary> elemnts in your favor.

You know when you are just into learning HTML and CSS and you are like "Wooow! There are too many tags and attributes to remember. I have to remember them all". 

No! You don't. 

I say, practice what you know. Discover what you don't know, then practice it. 

To be short, in this article, you will learn how to use <details> and <summary> HTML elements to make an accordion. We will create an accordion and style it with CSS but first…

What are Details and Summary? 

The <details> HTML element creates a widget that can disclose some information when toggled. The element has two modes: close and open. 

The <summary> tag which is apart from the element and it should be filled with the title of the accordion. A question most of the time. 
Enough theory. Here's an example:

 

<details>
      <summary> What is a Details tag?</summary>
      <p>
        The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary  element.
      </p>
    </details>

Notice that the <summary> tag is inside <details>. 

We can implement this to create a FAQ accordion such as in the picture above. 

Here's the HTML markup:

 

<div class="container">
  <div class="question-1">
    <details>
      <summary> What is a Details tag?</summary>
      <p>
        The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label must be provided using the summary  element.
      </p>
    </details>
  </div>
  <div class="question-2">
    <details>
      <summary> When to use it?</summary>
      <p>
        We use details tag when we want to make an accordion element.
      </p>
    </details>
  </div>
</div>

All simple. We have a div container and two other divs as questions. Inside the two questions we have the details tag, the summary element as the question, and the p tag as the answer to the questions. Easy to grasp. 

In the CSS file, we start by setting up our body such so:

 

*{
  box-sizon: border-box;
  margin: 0;
  padding: 0;
}
body{
    background-color: #CA2E55;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
}

Extremely simple. Now let's style our container:

 

.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #FFE0B5;
    width: 50%;
    margin: 20px auto;
    border-radius: 15px ;
}

To put the container in the center we can use a width that is less than 100% and the magical: margin: 0 auto;.

We put a 20px margin so it doesn't stick at the top. We use flex to center everything in the center.

question-1 and question-2:

question-1 and question-2: 
.question-1{
  width: 90%;
  border: 2px solid;
  margin: 15px 0;
  border-radius: 15px ;
}
.question-2{
  width: 90%;
  border: 2px solid; 
  margin: 15px 0;
  border-radius: 15px ;
}
amhoume.medium.comNow the details element when closed. 
details{
  font-size: 1.5rem;
  margin: 10px;
  cursor: pointer;
}
and when it's opened. 
details[open]{
  background-color: white;
  transition: all .8s ease;
}

Now the details element when closed.

details{
  font-size: 1.5rem;
  margin: 10px;
  cursor: pointer;
}

and when it’s opened.

details[open]{
  background-color: white;
  transition: all .8s ease;
}

Notice that we used the attribute open to style the element when it's opened.

 
Hi, my name is Amine, I am from Morroco and I AM HORRIBLE AT UI/UX. 

Notice the arrow? That comes as default style and it makes the element much ugly than it is. Let's change it. 
We can use an icon of an arrow :

details > summary {
    list-style-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20width%3D%221em%22%20height%3D%221em%22%20preserveAspectRatio%3D%22xMidYMid%20meet%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M19%2012l-7-6v5H6v2h6v5z%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E');
  border-bottom: black 1px solid;
  margin-bottom: 10px;
  padding-bottom: 10px;
}

You can cut it off by using: list-style: none;

And that's it. We have a simple FAQ accordion. 
Also, I want to tell you that you can use the open attribute in the HTML to keep it open all the time:

<details open>
      <summary> When to use it?</summary>
      <p>
        We use details tag when we want to make an accordion element.
      </p>
    </details>

You can use the detail element to create a dropdown menu. I tried it once and suggest you use a CSS preprocessor such as Sass. 

And here is the Codepen demo.

Finally, exploring HTML tags and various attribute is one of the best things that you can do as a beginner. 

I won't say do it when you have time but whenever you get the imposter syndrome telling you that you can't write HTML/CSS. 
It happened to me and that's why I am sharing. 

Follow me on Twitter and contact me via LinkedIn.