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.
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.
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.
Shut up and show me the code.
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.
What else would you like to see in this Web Dev series?