Meet

I want to talk about the wonderful <details>



element and show some examples of its use, from simple to crazy.

You are familiar with the layout model of a component that can change its state from visible to hidden:

 .component { display:none; } .component.open { display:block; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 toggleButton.onclick = () => component.classList.toggle('open')
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Now forget it. There is an item that can do this out of the box. Meet - <details>

The HTML <details>



element is used to reveal hidden (additional) information.

Basic application

First of all, let's see how this element works:

Please note that the example works without any additional styles or JavaScript. All functionality is built into the browser itself.

By default, the visible text depends on the language settings of your system, but you can change it by adding the <summary>



element to the <details>



<summary>



:

To change the state of an element in html you just need to add the open



attribute

 <!--  -  --> <details open> ... </details> <!--  -  --> <details> ... </details>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

And in order to manage state using JavaScript, a special API is provided:

 const details = document.querySelector('details') details.open = true //   details.open = false //  
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

A few words about accessibility

The <summary>



element is <summary>



. That is, moving around the page from the keyboard you will get to this element. But the content can get into focus only if <details>



open, that is, the focus will never fall on invisible elements inside <details>



.

Typically, screen readers can do well with the standard use of <details>



and <summary>



. There are some variations in the ad depending on the program and browser. More details .

Examples of using

Next, I will roughly repeat some of the components from the bootstrap documentation, but with little or no JavaScript.

Change the marker

The first thing you may need is to change the appearance of the marker. This is done very simply:

 summary::-webkit-details-marker { /*   */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Or you can hide the standard marker and implement your own

 /*    Chrome */ details summary::-webkit-details-marker { display: none } /*    Firefox */ details > summary { list-style: none; } /*       */ details summary:before { content: '\f0fe'; font-family: "Font Awesome 5 free"; margin-right: 7px; } /*       */ details[open] summary:before { content: '\f146'; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Collapse component

Everything is simple here. The basic functionality is the same. It is only necessary to slightly change the appearance:

Accordion component

Let's repeat the previous example, slightly change the appearance of <summary>



and get an accordion:

But, as you see, one element does not close when another opens. To achieve this, we need a couple of lines of JavaScript. You need to track the appearance of the open attribute on one of the <details>



elements and delete it from the rest:

Popover component

This implementation is very similar to the Collapse Component, with the difference that the <details>



content has absolute positioning and overlaps the content.

Dropdown component

Basically, this is the same Popover Component. Only the appearance differs.

The same example, only with a separate button

But Dropdown Component has one more important difference: on click outside it it should be hidden. To implement this again, you will need to write a couple of lines of JavaScript.

 //      document.body.onclick = () => { //    <details> document.body.querySelectorAll('details.dropdown[open]') //      .forEach(e => e.open = false) }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

Modal component

And finally, an example of a modal window.

In general, <details>



not the best choice for implementing this component. There is a much more suitable element - <dialog>



, but it has very poor browser support.

References

Can I Use Details & Summary elements

MDN details element

W3C details element

UPD.

I decided to add another example of using <details>



- multi-level navigation. Once again I want to draw your attention to the fact that the example works without any JavaScript. And it is much more inclusive than the traditional layout on the <div>



.