Exclusive accordions using the HTML details element

If you’re unfamiliar with

, it’s an element that creates a ‘disclosure widget’ in which information is visible only when the widget is toggled to an “open” state.
You should include in it a

element, which is used for the text describing the disclosure.
If you omit the

, a browser-specific string like “Details” will be used by default.
Click the two elements below to toggle them between open and closed states and notice the missing

in the first one:


  
    The response phrase for 413 "Content Too Large" used to be "Payload Too
    Large", and this message is still widely used.
  



  System configuration

Since an accordion is a series of expandable sections that allow users to show or hide content, a series of

elements can be used to create an accordion-like interface.
With the use of the name attribute, as we’ll see later, these elements can closely mimic the behavior of common accordions, in which only one section can be open at a time, with other sections automatically closing when a new one is expanded.

There’s great potential for

elements to fit into your pages because some minimal styling can go a long way to create interactive accordions using only HTML and CSS.

details {
  font-family: sans-serif;
  width: 50%;
}

summary {
  color: white;
  background-color: cornflowerblue;
  padding: 1rem;
  cursor: pointer;
}

summary:hover {
  background-color: darkslateblue;
}

p,
ul {
  padding: 15px;
  margin: 0 1rem;
  background-color: white;
}


  System configuration
  



  Recommended settings
  
    Extreme mode: on
    Raytracing: enabled
  



  Other details
  
    Material: Faux Leather, Metal
    Item Weight: 10.2Kg