Dev beginners, learn to use <details> and <summary> elemnts in your favor.
Tags: html, css, beginners
Published: 2021-09-30 17:27:10

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 <details> 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>
```

![FAQ accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpymz6td1lamzxw6gogv.png)


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.

![FAQ accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nue2mjmspjbxnhkuiha4.png)



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;
}
```
![FAQ accordion](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xew273hpxhavzz7e0dcc.png)

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.

![Create a FAQ accordion using details and summary elements](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hbqn7gw6883wvyyhzq9k.png)
 
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](https://codepen.io/aminequ/pen/eYWQqOy).

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](https://twitter.com/AmiineQu) and contact me via [LinkedIn](https://www.linkedin.com/in/amine-amhoume-023517109/).