Creating a collapsible section with nothing but HTML
Intro
I love creating User Interfaces (UI) and often times well need a section to expand and collapse for example in a FAQ section.
I used to reach for NPM and install a library to help, until I discovered that you can do this with pure HTML elements!
They aren't perhaps the most obviously named:
They have pretty great browser support.
Details
The details element is the element to contain the content we want to show and hide. The summary element is caption to describe what is hidden, in an FAQ section this might be the question and the answer is hidden in the details element until it is expanded.
You can toggle the details element open and closed with JavaScript if needed in your use case by setting the open attribute on it.
It is also pretty straightforward to style the arrow, you can see this in the example below where I've used an emoji instead but this can be anything you want.
Examples
Summary
In summary, you can use what browsers give you to create an expanding and collapsing section. It will be accessible for all users as its semantic HTML. It will be super quick to load as there is only HTML and a few lines of CSS. It will be responsive to any screen size.
Happy building!
What else would you like to see in this Web Dev series?