DEV Community

Cover image for Native HTML: Accordion

Native HTML: Accordion

Andrew Bone on January 04, 2019

If you cast your mind back 10 years to when JQuery was king you might remember how ubiquitous JQuery UI was, it meant sites suddenly had more funct...
Collapse
 
somedood profile image
Basti Ortiz

I'm really enjoying this series so far, Andrew. Looking forward to learning more native HTML elements. As of writing this, I have recognized none of the HTML elements you have mentioned in your posts. It's great to learn something new in HTML. It's a breath of fresh air from all the JavaScript I have in my life right now.

Collapse
 
link2twenty profile image
Andrew Bone

Thank you that means a lot 🙂

Collapse
 
susannahrolfes profile image
Susannah Rolfes

All I can say is, this is beautiful. So elegant. So simple. Perfect for my needs! I have been wrestling with CSS for hours.

I taught myself HTML in 1997. Haven't designed a website since 2003, when CSS was brand new. No clue about all this new stuff. Thank you, thank you, thank you! I'm going to use this for the lyrics to my songs (I'm a songwriter/composer).

Again, thank you!

Collapse
 
shubhambattoo profile image
Shubham Battoo

This is a really good post. Very interesting series.

Collapse
 
elmuerte profile image
Michiel Hendriks

Unfortunately, at this time there's no built-in way to animate the transition between open and closed.

I don't see that as a problem :) Animations in functional parts of a UI are a UX-smell.

Collapse
 
link2twenty profile image
Andrew Bone

I agree that it's not a show-stopper but I would like the option to add a slide out animation. Generally, I don't like it when content appears, seemingly, from nowhere.

Collapse
 
jeansveronica profile image
Veronica Lee Jeans • Edited

I absolutely love this...thanks a million....makes my job sooo much easier. Hurrah for no Javascript! I am using it for a new Shopify store :)

Collapse
 
link2twenty profile image
Andrew Bone

An aside for any new readers

dev.to now uses this method to hide and show comments

Collapse
 
lucaargentieri profile image
Luca Argentieri

Is it possible to animate this accordion?