How to create an accordion using HTML & CSS, no JavaScript involved !

2 min readMay 9, 2020

Create accordion using HTML and CSS.

Hello there!

This article is one stop shop for all the details (<details>) 😉 you need to create an accordian for your website.

The Basics

Creating a pure HTML accordion involves <details> and <summary> elements:

<details>
Specify details that the user can view or hide on click.
<summary>
Defines a visible heading for the <details> element. The heading can be clicked to view/hide the details.

So, basically this:<details>
    <summary>
       <!--heading goes here-->
    </summary>
       <!--hidden content goes here that you can toggle-->
</details>

Let’s try an example:

<details>
    <summary>Click to show content</summary>
    <p>Whoa! you found me.</p>
</details>

Remove default marker

I know , I know, you are definitely not happy about the default marker/arrow ▶ that shows up for details tag. 😁
Don’t worry, there’s a fix for that, learned this from our dev friends at stack overflow.

Here’s what you need to do:

/* For Chrome */
details summary::-webkit-details-marker {
    display:none;
}

/* For Firefox */
details > summary {
    list-style: none;
}

and it’s gone. Yay! Don’t believe me? See it for yourself.

Add Animation

That being said, there are also ways to animate the way content is shown or hidden and you need to know about the details’ [open] attribute for that.

details[open] summary ~ * {
    animation: slomo .3s ease-in-out;
}/* Added an animation named slomo */@keyframes slomo {
    0%    {opacity: 0;}
    100%  {opacity: 1; }
}

Complete Example

And tada 🎉 a beautiful responsive accordion page is ready 😍https://puneetpalkaur.github.io/HTML5Accordion/

Don’t forget to Right Click > Inspect Element & play with the CSS styles.

Be Safe out there! 🏡