DEV Community

Cover image for Native HTML: Accordion Revisited

Native HTML: Accordion Revisited

Andrew Bone on January 06, 2025

Six years ago, I explored the native <details> and <summary> elements to create accessible accordions. Since then, the web platform has...
Collapse
 
getsetgopi profile image
GP

I love it! interpolate-size also works in Edge. I like to see more examples with modern CSS and HTML.

Collapse
 
link2twenty profile image
Andrew Bone

Let me know what you think, are components like this being native HTML and CSS helping you move away from JS? Do you even want to?

Collapse
 
teszaract profile image
Mesum-Hussain • Edited

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.

Collapse
 
link2twenty profile image
Andrew Bone

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.

Collapse
 
kallmanation profile image
Nathan Kallman

Thanks for teaching me about the name attribute on detail elements!

Collapse
 
prolomon1 profile image
Taiwo Oyetade

Thank you so much.
I have been using JavaScript for accordion but seeing this is would love to try this

Collapse
 
codemonster240 profile image
Andrew McSillyone

I've always used <div> for accordions. Now I know what new update to do to my site!

Collapse
 
doron profile image
Doron Brayer

Nice.

Collapse
 
abbatyya profile image
abbatyya

Awesome, perfectly

Collapse
 
sakrad_cmmi_111f1a88c5c47 profile image
Sakrad CMMI

Thanks for sharing!

Collapse
 
betterslip profile image
BetterSlip

Cool!

Collapse
 
aadswebdesign profile image
Aad Pouw

With a little bit of js sugar, there is so much more you can do with details/summary!

Collapse
 
link2twenty profile image
Andrew Bone

What extra functionality would you add with JS? 😊

Collapse
 
aadswebdesign profile image
Aad Pouw

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?

Collapse
 
flipperzerounleashed profile image
FlipperZeroUnleashed

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.

Collapse
 
harrywickham profile image
Harry Wickham
Collapse
 
link2twenty profile image
Andrew Bone