AshKeys

Confessions and Confusions of Ashok M A. Personal and Professional Blog.

Ashok Mannolu Arunachalam, How toVanilla ComponentsHTMLCSSAccordian
Back

How to create accordian with HTML and CSS

Recently, I had to fix an make shift accordian* that the team had in place for sometime.

It did not take me much time to figure out that it was a over kill and could have made it simple by just using the HTML and CSS.

Details tag to the rescue

There is a pure HTML tag that can be used to show a summary of information and let the user to toggle the summary to know more about the topic.

This is a summary but more information available.

This is detailed information that you would like to know.

html
<details>
<summary>
This is a summary but more information available.
</summary>
<p>
This is detailed information that you would like to know.
</p>
</details>

<details> tag toggles an attribute called open based on the state of the accordian.

Custom ::marker

By default, the accordian uses a thick filled arrow marker as seen in the above example. The same can be overwritten as follows

Summary with custom marker.

This is detailed information that you would like to know.

jsx
<div>
<details>
<summary>Summary with custom marker.</summary>
<p>This is detailed information that you would like to know.</p>
</details>
<style jsx>{`
details > summary::marker {
content: '+ ';
}
details[open] > summary::marker {
content: '- ';
}
`}</style>
</div>
Use fontawesome icons for the marker.

Use an icon but with transform animations during state change. ( X <=> +)