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.

<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

<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 <=> +)