The <details> Of a Dropdown
How to build a beautiful dropdown panel with just HTML and CSS
I would by no means consider myself as an expert when it comes to HTML & CSS. But I thought I just share what I found to work really well for me, when I tried to build a dropdown panel without any JavaScript.
tl;dr: You can build a fully functional dropdown panel by using plain HTML and CSS with no JavaScript involved by leveraging the <details> and <summary> tags. Here’s a minimal example that you can use and customize to your needs:
If you want to see more advanced dropdowns built with this approach and want to learn about what’s going on here, then read on.
There is an HTML tag that might count among the little known but most powerful tags in the world of websites: the <details> tag.
It usually appears together with another tag that makes the <details> tag shine: the <summary> tag.
It basically does what it says — it shows you a summary. And you can click on it to see some details. The best feature is…
