Best Black Friday / Cyber Monday Deals for 2022 Click Here 🤑

Create a HTML-Only Accordion to Hide & Reveal Content Without JS or CSS

Written by

Did you know that there's a native HTML5 solution to very easily create an accordion read more/less button to hide and reveal content with NO JavaScript or CSS. Read on to find out how.

html5 accordion

The <details> and <summary> HTML5 tags are officially a disclosure widget element, but the <details> paired with <summary> HTML5 tags will give you a pure HTML-only accordion.

Meaning no JS OR CSS is needed. How cool is that!

Here is an example showing a simple element with a <details> and <summary>.

Here's the code:

<details>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>

and here's how it will look:

Read More

This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?

How does it work? The <details> tag serves as a wrapper for an element that can be opened or closed. The user has to click on the label that is the <summary> tag to open or close the element.

What about styling and behavior?

Styles

You can apply CSS styling to customize the appearance of the reveal text box. The below gives a tabbed interface style:

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: #ccf;
}

By default, the cursor appears like an arrow, but if you want it to be a pointing hand instead then use this:

details {
cursor: pointer;
}

Behaviors

Setting behaviors is very limited, there is really only one thing you can do and that is to make the revealed text open by default.

To start the accordion in its open state, add the Boolean open attribute to the <details> tag:

<details open>
 <summary>Read More</summary>
  <p>This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?</p>
</details>
Read More

This is a native HTML5 accordion to hide and reveal content. Pretty cool, right?

What attributes can I use?

The below attributes can be used for the <details> tag:

AttributeValueSummary
openopenDefault is not open.
id  valueProvides a unique identifier.
class  classnamesAssigns class names to the element.
style  CSS-valuesAssigns CSS styles to the element.

So what are the limitations? There's always a catch, isn't it?

No support for Internet Explorer

This HTML5-only accordion won't work in any version of Internet Explorer. If you have to have it support IE11 you will have to use a different fallback solution using JQuery. All other browsers support <details> and <summary>.

No customized animations or transitions

While you can modify and style the appearance (as shown above), you won’t be able to do any text reveal animations or transitions. If you want to do that you'll need another CSS/JSS accordion solution.

Screen readers and accessibility

This is native HTML5 and it *should be* accessible but has been found that the actual revealed text isn’t always announced correctly by a screen reader.

References:

Home » Resources & Tools » Create a HTML-Only Accordion to Hide & Reveal Content Without JS or CSS

Join our newsletter

Subscribe to our weekly roundup newsletter and get the latest industry news & trends

By clicking 'subscribe" you agree to our terms of use and privacy policy.