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

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:

Mathias Ahlgren is the CEO and founder of Website Rating, steering a global team of editors and writers. He holds a master's in information science and management. His career pivoted to SEO after early web development experiences during university. With over 15 years in SEO, digital marketing, and web developmens. His focus also includes website security, evidenced by a certificate in Cyber Security. This diverse expertise underpins his leadership at Website Rating.

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

Stay informed! Join our newsletter
Subscribe now and get free access to subscriber-only guides, tools, and resources.
You can unsubscribe at any time. Your data is safe.
Stay informed! Join our newsletter
Subscribe now and get free access to subscriber-only guides, tools, and resources.
You can unsubscribe at any time. Your data is safe.
Stay informed! Join our newsletter!
Subscribe now and get free access to subscriber-only guides, tools, and resources.
Stay Up-to Date! Join our Newsletter
You can unsubscribe at any time. Your data is safe.
My Company
Stay Up-to Date! Join our Newsletter
🙌 You are (almost) subscribed!
Head over to your email inbox, and open the email I sent you to confirm your email address.
My Company
You are Subscribed!
Thank You for your subscription. We send out newsletter with insightful data every Monday.
Share to...