German version

The common methods to build an accordion for a website are based either on JavaScript or on the application of the CSS pseudo class ":target" (here an example).
It is easier with the HTML elements "details" and "summary". In this way you can quickly create a perfomant and accessible accordion. CSS is only needed to create the accordion elements.

Here is a simple example: If you click on the word "Details", the text explaining the details opens.

The according HTML code only consists of the HTML tag "details" and the explanatory text:

HTML Code
<details>Here come the details.</details>

Simple but not without error message

So you only need the HTML element "details" and the text for the details. The heading "Details" as well as the triangle showing the status "opened" - "closed" will be added automatically.

So this works very simply; if you validate the code snippet in the W3C validator, you'll get the following error messages:

Error: Text not allowed in element details in this context.

Error: Element details is missing a required instance of child element summary.

That means it is not absolutely necessary functionally, but the child element "summary" should always be inserted. The title of the accordion element is inserted there. And the following HTML element – whether it is a paragraph ("p") or a container ("div") – includes the collapsible content. I will explain this later in the article.

Create an Accordion with the HTML Elements "details" und "summary"

Designing an accordion means not just writing a few HTML elements below each other and filling them with text. It is also about good functionality, appearance and design options.

I would like to start with a simple example, which will be expanded and changed further on.

1. The HTML Element "details"

The HTML element "details" causes contents to be opened and closed again.
For this it is sufficient to write the following code:

HTML Code
<details><p>Auf- und zuklappbarer Inhalt</p></details>

Try it out live! For this I have set the individual steps, how the Accordion is structured, for you at codepen.io. You can test it here (just click on "Details" under "Result"!) and on codepen.io you can also change or extend it yourself. Simply click on "Edit on CODEPEN".

See the Pen HTML Element Details - 1. Step by Rüdiger Alte (@drralte) on CodePen.

But also here there is an error message again, if you test the HTML code in the W3C validator:

Error: Element details is missing a required instance of child element summary.

So in the next step I add the required HTML element "summary".

2. Accordion with "details", "summary" und "p"

I now insert the required HTML element "summary" into "details". This makes "summary" the child element of "details".

For example, if the HTML element "summary" is followed by a paragraph, this paragraph becomes the collapsible target. The appropriate code is:

HTML Code
<details>
   <summary>Title or Heading</summary>
   <p>Here comes the collapsible text.</p>
</details>

See the Pen HTML Element Details - 2. Step by Rüdiger Alte (@drralte) on CodePen.

This code passes the validation without complaint.

3. Design Open and Closed Accordion Differently

The HTML element "details" contains the attribute "open", with which you can set the respective status via CSS.

If the accordion is closed, the font should be normal, if it is open, the font of the title should be italic. Therefore I use CSS to address the attribute "open" of the HTML element "details". The CSS code for it:

CSS Code
details[open] summary {
   font-style: italic;
}

Please click just on the heading "Title or Heading" in the following Codepen box. Now you can see that the font changes from normal to italic as soon as the Accordion element is opened.

See the Pen HTML Element Details - 2. Step by Rüdiger Alte (@drralte) on CodePen.

4. Displaying Multiple Accordion Elements

If more than one element that can be opened is to be placed on the website, it is not sufficient to just put new "summary elements" under a "details element". For each expandable element, a "detail element" must be written into the HTML code:

HTML Code
<details>
   <summary>Titel oder Überschrift</summary>
   <p>Here comes the collapsible text.</p>
</details>

<details>
   <summary>Titel oder Überschrift</summary>
   <p>Here comes the collapsible text.</p>
</details>

<details>
   <summary>Titel oder Überschrift</summary>
   <p>Here comes the collapsible text.</p>
</details>

See the Pen HTML Element Details - 4. Step by Rüdiger Alte (@drralte) on CodePen.

5. Replace Triangle with Plus and Minus

If you don't like the triangle as a status indicator, you can easily replace it with a picture or another character. Before I add some CSS to make the accordion look like an accordion:

CSS Code
* {
    box-sizing: border-box;
}

img {
   max-width: 100%;
}

.details-wrapper {
   width: 75vw;
   margin: 0 auto;
   background-color: #E5E5E5;
   box-shadow:0 0 1px 2px #BFBFBF;
}
details {
   padding: .5rem;
   font: 1rem/1.2 sans-serif;
}

summary {
   padding: .25rem 1rem;
   background-color: steelblue;
   font: bold 1.25rem/2 sans-serif;
   border: none;
   border-radius: 3px;
   box-shadow: 0 -1px 1px 1px rgba(0,0,0,0.5);
   color:floralwhite;
   cursor: pointer;
   /*list-style: none;*/ /* Triangle not shown */
}
/* Triangle not shown - Style for Webkit-Browser */
/*summary::-webkit-details-marker {
   display: none;
}*/
summary::before {
   padding-right: .25rem;
   /*content: '+ ';*/  /* Instead of Triangle closed */
}
details[open] summary::before {
   padding-right: .25rem;
   font-style: italic;
   /*content: '- ';*/ /* Instead of Triangle open */
}

/* Styling the summary in case of open 'details' */
details[open] summary {
   font-style: italic;
   border-radius: 3px 3px 0 0;
}

.details-content {
   margin: 0;
   padding: .25rem 1rem;
   background-color: floralwhite;
   border-radius: 0 0 3px 3px;
   box-shadow: 0 1px 1px 1px rgba(0,0,0,0.5);
   color: steelblue;
}
.details-content p {
   font: 1.125rem/1.5 sans-serif;
}

In the following code I replace the triangle with a plus sign for the closed accordion and with a minus sign for the open accordion.

CSS Code
summary {
   ...
   list-style: none; /* Triangle not shown */
}
/* Style für Webkit-Browser */
summary::-webkit-details-marker {
   display: none; /* Triangle not shown */
}
summary::before {
   padding-right: .25rem;
   content: '+ '; /* Instead of Triangle closed */
}
details[open] summary::before {
   padding-right: .25rem;
   font-style: italic;
   content: '- '; /* Instead of Triangle open */
}

See the Pen HTML Element Details - 5. Step by Rüdiger Alte (@drralte) on CodePen.

6. Display the First Accordion Element Openly

If you don't want to present the first (or any other) Accordion element closed, but opened to the viewers, you insert the attribute "open" into the concerned HTML element "details":

HTML Code
<details open>
  <summary>Das erste Accordion-Element offen anzeigen</summary>
  <p>Text</p>
</details>

See the Pen HTML Element Details - 6. Step by Rüdiger Alte (@drralte) on CodePen.

HTML Code
<details>
   <summary>Title</summary>
   <div class="details-content">
      <p>A paragraph</p>
      <figure>
         <img src="path-to-the-image.png" alt="This is a placeholder picture" title="This is a placeholder picture">
         <figcaption>This is a placeholder picture</figcaption>
      </figure>
      <ul>
         <li>List item 1</li>
         <li>List item 2</li>
         <li>List item 3</li>
      </ul>
      <p>This is a <a href="">Link</a> to nowhere.</p>
   </div><!-- end details-content -->
</details>

7. Browser Support

Unfortunately not all browsers support the HTML element "details" yet. Internet Explorer and Edge do not support "details", nor does Opera mini. All other current and popular browsers support the function of "details".

In browsers that do not support "details", the accordions are displayed open, so that you can use this feature even if it is not supported continuously. The content will be readable in any case.

On the website caniuse.com you can see which browsers support the HTML function of "details" or not. Here is a corresponding screenshot:

Browser support for the HTML elements "details" and "summary" - screenshot 19.11.2018