Designing a simple user interface can oftentimes be more difficult than expected. They are deceptive. A frictionless interface is no stroke of luck; a lot of work and experience go into making something you can use without thinking about it.
The separation of concerns is a longstanding, tried-and-true design principle in software development. When it comes to the web, the classic separation of concerns is HTML, CSS, and JS. But this has become a tiring, cumbersome, and fragile system to work with. I argue that the traditional separation of concerns on the web has died and been reborn with a new vision for what a "concern" even is.
There are quite a lot of native HTML elements we can use to enhance our components to give them the most support and features "out of the box." In this article we are going to dive into the native HTML disclosure elements to build an accordion component, learn how to use and extend it, all with vanilla JS and optionally some other popular JS frameworks.