Do you know the <details> HTML Tag? (Code Snippet)
1 min read

Do you know the <details> HTML Tag? (Code Snippet)

Do you know the <details> HTML Tag? (Code Snippet)

In my career, I have spent more hours than I like to admit building accordions on websites. But did you know that if you do not need any fancy functionally such as all the remaining accordions closing when you open one. Than without JavaScript intervention you can use a little know HTML tag <details>

<details>
  <summary>FAQ Question 1</summary>
  <p>This is the answer to question 1.</p>
</details>
<details open>
  <summary>FAQ Question 2</summary>
  This is the answer to question 2.
</details>

This element has a child element called <summary> which is used to contain the information that is displayed in the accordion before it is opened.

Applying the attribute open to a details tag makes it so the accordion is open by default, This is great if you want the first one in the list to be open for example.

If you want to style the details tag, here are the CSS classes you need to override.

details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: .5em .5em 0;
    margin-bottom: 8px;
}

summary {
    font-weight: bold;
    margin: -.5em -.5em 0;
    padding: .5em;
}

details[open] {
    padding: .5em;
}

details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: .5em;
}

and if you do happen to want to add some javascript magic when someone clicks to open or close the accordion you can use the built-in event called "toggle".

details.addEventListener("toggle", event => {
  if (details.open) {
    /* the element was toggled open */
  } else {
    /* the element was toggled closed */
  }
});

lastly if you are worried about support. Do not fear caniuse.com says it can be used everywhere. :)