![Cover image for Native HTML: Accordion Revisited](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvaht7gb8djg41vccvhfj.png)
Six years ago, I explored the native <details> and <summary> elements to create accessible accordions. Since then, the web platform has...
For further actions, you may consider blocking this person and/or reporting abuse
I love it!
interpolate-size
also works in Edge. I like to see more examples with modern CSS and HTML.Let me know what you think, are components like this being native
HTML
andCSS
helping you move away fromJS
? Do you even want to?Can we create a Tabbed Single Page App like WhatsApp using concept? Making the Sections horizontal with CSS? What about a Nav Drawer which reveals when a Section with a perticular icon is clicked?
I think this way we can create a very light mobile webapps designing such HTML elements like native apps.
There should be a CSS framework which applies the native design based on the platform.
We shouldn't need to use JS for building morden beautiful Webapps. JS should only be used if we need some computing problem to be solved, just like a programming that it is. Not to design a basic UI.
I think the WhatsApp side panel is more of a tabs layout, whilst you could do some hacky CSS to make details behave that way I'd be worried about the accessibility for keyboards users and screen readers.
The folks over at w3 have a patterns guide that is super useful for looking at what would be needed for a new component.
Open UI is also a great place to see really early proposals for new native components like a tabs component.
Thanks for teaching me about the
name
attribute on detail elements!Thank you so much.
I have been using JavaScript for accordion but seeing this is would love to try this
I've always used
<div>
for accordions. Now I know what new update to do to my site!Nice.
Awesome, perfectly
Thanks for sharing!
Cool!
With a little bit of js sugar, there is so much more you can do with details/summary!
What extra functionality would you add with JS? 😊
Well as you might know, the eventlistener for details/summary is toggle. With that you can pass let say a callback and perform actions on the 'open' attribute. I have a function for that, it takes the details id & two callbacks, one for 'open' and one for 'close'. Aside of that you also have to take some action on the summary element. "summary::marker{ content:''}" if you want to get rid of the standard arrows, then you can use 'before' to handle your own icons. There is a lot more to say about it but that's for another time?
Native HTML solutions for creating an accordion are often overlooked but can be highly effective. Using and tags provides a lightweight, semantic approach without needing JavaScript. For more complex use cases, adding a sprinkle of CSS for animations or styling can make it visually appealing. Sites like FlipperZeroUnleashed often discuss minimalist yet powerful design ideas that could be inspiring for implementing such features.