Member-only story
Dropdown Lists Without CSS or JS
The <details> element in HTML creates a “dropdown list” section of text content. It generates a “toggle” arrow allowing the hidden text within the component to be shown or hidden.
This element is semantic (meaning it is easily understood by web crawlers) and supported by all major browsers. It works without the use of any additional CSS or JS (though both can be added for extra features if needed).
It also allows you to support nested dropdowns without any extra work, something that can be hassle if you want to create your own implementation of this feature. View a demo here.
If you come across a situation in which you need to create either a simple or complex dropdown with this basic format, do not use a <div> and add custom CSS + JS, unless absolutely necessary. The HTML specification already has this case covered!
Thanks for reading, and for taking a step toward becoming a better HTML Author.
If you like this post, consider becoming a member to support writers like myself on Medium!
Sources:
