Creating an Accordion with Pure HTML – No Javascript

What is Accordion?

Accordions are a type of user interface element used in web design that displays content in a collapsible, stacked format. Typically, an accordion includes a header or title that, when clicked or tapped, reveals a summary of the hidden content. This summary can then be expanded or collapsed to reveal or hide the detailed information as needed.

How to do it Without JavaScript?

Traditionally, creating an accordion required JavaScript because it involved dynamically manipulating the DOM to show or hide the content associated with each accordion header when the user clicked on it. But now, thanks to the HTML <details> and <summary> elements, you can create an accordion without relying on JavaScript, this also leads to simpler and optimized code, which can ultimately enhance the performance and speed of your web page!

In essence, there are 2 key HTML elements involved in this process:

Let’s walk through how to create an accordion using pure HTML.

Simple Example

In this example, we’ve created 3 accordion items, each with a title and collapsible content section.

The <summary> element serves as the header or title for the accordion, When you click or tapped on the <summary> element, it toggles the status of the parent <details> element to either open or closed.

<style>
  details {
    border: 1px solid #cccccc;
    margin-bottom: 8px;
  }
  summary {
    padding: 8px;
    cursor: pointer;
  }
</style>

<div>
    <details>
       <summary>Title 1 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat ullamcorper neque tempor aliquet. Aliquam erat volutpat. Nunc pellentesque finibus ex, sed vulputate lorem dapibus id. Aliquam erat volutpat. Sed vehicula interdum vulputate. Integer dolor est, egestas ac ornare non, suscipit id massa</div>
    </details>
    <details>
       <summary>Title 2 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat ullamcorper neque tempor aliquet. Aliquam erat volutpat. Nunc pellentesque finibus ex, sed vulputate lorem dapibus id. Aliquam erat volutpat. Sed vehicula interdum vulputate. Integer dolor est, egestas ac ornare non, suscipit id massa</div>
    </details>
    <details>
        <summary>Title 3 - Click me to show more information</summary>
        <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris consequat ullamcorper neque tempor aliquet. Aliquam erat volutpat. Nunc pellentesque finibus ex, sed vulputate lorem dapibus id. Aliquam erat volutpat. Sed vehicula interdum vulputate. Integer dolor est, egestas ac ornare non, suscipit id massa</div>
    </details>
</div>

Result:

By default, the content inside a <details> element is hidden, and the user can expand it by clicking on the <summary> element.

Style the Accordion

1. Styling the disclosure triangle Icon

The <summary> element has a default display of display: list-item, making it easy to customize the disclosure marker of an accordion by setting the list-style property. (How to do it? Refer to examples 1 & 2 below)

However, it is important to note that not all browsers support the full functionality of this element yet, so it is essential to check the Browser compatibility section below for details. For Webkit-based browsers like Safari, it is possible to control the icon display using the non-standard CSS pseudo-element ::-webkit-details-marker. (Refer to example 3)

<style>
  details {
    border: 1px solid #cccccc;
    margin-bottom: 8px;
  }
  details > summary {
    list-style-image: url("icon_remarks.png");
    padding: 8px;
    cursor: pointer;
  }
  details > div {
    padding: 8px;
    list-style: none;
  }
</style>

<div>
    <details>
       <summary>Title 1 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </details>
    <details>
       <summary>Title 2 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </details>
</div>

details > summary {
   list-style-type: ' \1F449 ';
}

details summary::-webkit-details-marker {
    background: url("icon_remarks.png") center no-repeat;
    background-size:contain;
    color: transparent;
}

details > summary {
    list-style: none;
}
summary::-webkit-details-marker { 
    display: none 
}

summary::-webkit-details-marker { 
   display: none 
}

summary::-webkit-details-marker { 
   display: none 
}

2. Styling the “Open” State of HTML <details> Element

To customize the open state of the HTML <details> element, you can use the “details[open]” code in CSS. This code specifically targets the <details> element when it’s in the open state.

Customizing the styling of the <details> element can be a great way to enhance the overall design of your website. You can adjust various aspects of the <details> element, such as the background color, font color, border, and even the icon used to expand and collapse the element.

<style>
  details {
    box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.12);
    margin-bottom: 8px;
    border-radius: 8px;
    overflow: hidden;
  }
  details > summary {
    padding: 8px;
    cursor: pointer;
    background: #f4f4f4;
    font-weight: bold;
    list-style-type: ' \2753 ';
  }
  details > div {
    padding: 8px;
  }
  details[open]{
    background: white;
  }
  details[open] > summary{
    font-weight: normal;
    background: rgb(236, 255, 230);
    list-style-type: ' \1F449 ';
    border-bottom: 1px solid #cccccc;
  }
</style>

<div>
    <details>
       <summary>Title 1 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </details>
    <details>
       <summary>Title 2 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </details>
</div>

Setting the <details> Box to “Open” by Default

To start the <details> box in its open state, you can add the Boolean open attribute to the particular item, for example:

<div>
    <details>
       <summary open>Title 1 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </details>
    <details>
       <summary>Title 2 - Click me to show more information</summary>
       <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </details>
</div>

Browser Compatibility

	Chrome	Edge	Firefox	Safari	Opera	Chrome Android	WebView Android	iOS Safari	Firefox Android	Opera Android	Samsung Internet
<details>	12	79	49*	6	15	yes	yes	6	49*	14	yes
<summary>	12	79	49	6	15	yes	4	yes	49	14	yes
display: list-item	89	89	49		75	89			49		15.0

* Note: Before Firefox 57, there was a bug in <details> element, it can’t be made open by default using the open attribute if they have a CSS animation active on them.

sources:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details#browser_compatibility
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary#browser_compatibility

In conclusion, creating an accordion with pure HTML instead of relying on JavaScript offers several benefits. It simplifies the code and eliminates the need for extra scripts, resulting in optimized performance and faster loading times. Additionally, it reduces the risk of compatibility issues with different browsers and devices. By following the steps outlined in this article, hope you are now able to build your own widget with ease! Happy Coding!