The Details tag for creating disclosure widget

Written by

Almost all web developers run into the problem of implementation of a disclosure widget. In the HTML5 standard implementation that is supported by all modern browsers there is a special HTML tag that allows you to create a disclosure widget. The tag is: 

<details>

Using this tag you can create disclosure widget without writing any code on JavaScript. Below is an HTML markup: 

          <details>
            <summary>Widget title</summary>
            <p>Widget content</p>
          </details>

The result of this code is rendered below:

Widget title

Widget content

On clicking the label – the Widget title or the black triangle, the widget expands and collapses. When the widget is expanded the widget content becomes visible. On clicking the label again, the content becomes hidden. It means you can toggle the state of the widget.

The detail tag has a special attribute of its state called – open. When the widget is open the details tag is having the attribute open which can have a boolean value – true or empty value.

Otherwise when the widget is closed the open attribute can have a boolean value – false or the attribute may be removed.

But on the object level the attribute – open always exists and has a boolean value. In a markup the attribute may be ommited.

This simple widget will work in every modern browser excluding Internet Explorer and Edge.

Also the widget appearance can be changed by CSS styles. For example the black triangle can be replaced with plus and minus signs depending on the state of the widget. The widget title can be decorated with a grey gradient background. CSS styles are below:

details.style1
{
 margin-bottom: 10px;
}

details.style1 > summary::-webkit-details-marker
{
 display:none;
}

details.style1 > summary
{
 position: relative;
 cursor: pointer;
 background: linear-gradient(#dbdbdb,#898989);
 display: inline-block;
 padding: 5px;
 padding-left: 25px;
 border-radius: 5px;
 outline: none;
 width: 100%;
 text-align: center;
}

details.style1 > summary:hover
{
 background: linear-gradient(#bbbbbb,#737373);

}

details.style1 > summary::after
{
 display: block;
 position:absolute;
 content: '+';
 font-size: 20px;
 font-weight: bold;
 top: 0px;
 left: 5px;
}

details.style1[open] > summary::after
{
 content: '-';
}
Widget title

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Widget title 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

First widget has the open attribute and the widget is rendered in the expanded state. All these widgets have been created totally without JavaScript.

Nevertheless sometimes you need to check the state of the widget and do some actions depending on its state. For example when a user attempts to change the state of the widget by clicking on it, the others widgets must collapse. It can be implemented only with JavaScript, the code is below:


window.onload = function() {

  var details = document.getElementsByClassName('collapsed');
  for (var i = 0; i < details.length; i++) {
    var element = details[i];
    element.addEventListener("toggle", function(event) {
      if (this.open) {
        for (let i = 0; i < details.length; i++) {
          let element = details[i];
          if (element !== this) {
            element.open = false;
          }
        }
      }
    });
  }
}

The JavaScript code above begins working when a page is fully loaded. Then all the detail tags with collapsed class are chosen and we start the loop with these elements. Inside the loop for each element we set up a function that will be called whenever the specified event is fired. In our case the event will be fired when a user is clicking on the widget title and the event has name toggle. In the function we are checking the current object with each object from the details variable inside a loop too. If current object isn’t equal to the object from the details variable then we set the open attribute of this object to a boolean value – false.

Thus the all the widgets that exclude a clicked widget will be collapsed and the clicked widget will be expanded. The examples are below:

In conclusion, I think it is a fast and a simple way to create disclosure widgets without coding and loading third party libraries like jQuery, etc. But you should keep in mind that this solution isn’t working in Internet Explorer and Edge.