Creating a Native Q&A / FAQ Accordion with〈details〉and〈summary〉HTML Tags

html
Published on April 23, 2019

A FAQs section is one of the common elements in a webpage. It is a nice way of displaying questions and answers that the end user might have.

Creating such a FAQ accordion involves creating a series of <div>s, and then using Javascript to show a single FAQ when the user clicks on it.

But now browsers have introduced 2 new tags — <details> and <summary>, that can create such a FAQ accordion with only HTML and no Javascript involved.

Demo

Do you offer commercial license for your designs ? Yes we offer a free commercial license with all our designs.
What is your delivery time ? We deliver within 2-4 days.
Do you charge for shipping ? Yes we charge for shipping depending on the shipping service selected.

The <details> and <summary> Elements

The <details> element creates a widget in which the information contained in it can only be seen in the "open" state. If the state is "closed" then information in it cannot be viewed by the user. The default state is closed, so text inside it are hidden initially.

The <summary> element defines a label or a caption for the <details> element. This label is always visible to the user.

<details>
    <summary>Do you offer commercial license for your designs ?</summary>
    Yes we offer a free commercial license with all our designs.
</details>

When the <summary> element is clicked, the state of the parent <details> element is toggled between "open" and "closed". That is, with each click the information contained in it will be shown if not visible previously, and it will be hidden if previously visible.

The <summary> element is optional. But if not included, browser will include a default string ("Details") as the label.

Keeping <details> Opened at Page Load

By default information in the <details> element is hidden at page load, but sometimes you want to display it at page load itself. This can be done by including the attribute open.

<details open>
    <summary>What is your delivery time ?</summary>
    <p>We deliver within 2-4 days.</p>
</details>

Changing Style for the <summary> Element with CSS

By default the <summary> tag has the CSS display: list-item (it behave like a <li> element). A triangle icon is displayed by default. This can be changed by changing the list-style-type CSS property.

#details-tag summary {
   /* set circle as the icon */
   list-style-type: disc; 
}

The icon can also be removed by setting CSS of <summary> element to display: block.

Knowing whether <details> is Opened or Closed with Javascript

The open attribute of the <details> element is a boolean value which is set to true if details are currently shown, and false otherwise.

var is_opened = document.querySelector("#faq-element").open;
if(is_opened === true)
    console.log('Details are shown');
else
    console.log('Details are hidden');

Knowing when <details> is Opened or Closed with Javascript Event

The <details> element will fire a toggle event whenever state changes between open and closed. The open attribute can then be checked whether it is currently opened or closed.

document.querySelector("#faq-element").addEventListener(function() {
    if(this.open === true)
        console.log('Details are shown');
    else
        console.log('Details are hidden');
});

Other Javascript events such as click will also work, but the toggle event should be the preferred way of detecting state changes.

Conclusion

The <details> and <summary> elements are very useful additions to HTML and will make your development time quicker.

All modern browsers except Edge support these tags. But as Edge has shifted to Chromium engine, it should be available there soon.

In this Tutorial