DEV Community

Cover image for Creating a collapsible section with nothing but HTML

Creating a collapsible section with nothing but HTML

Jordan Finneran on December 23, 2020

Contents Intro Details Examples Summary Intro I love creating User Interfaces (UI) and often times well need a section to...
Collapse
 
madza profile image
Madza

proof that if you know the basic tech to the core, you don't always need frameworks, libraries, and all the other 'shiny' things 😉

Collapse
 
jordanfinners profile image
Jordan Finneran

There so much you can do with HTML and CSS!
There is also a place for shiny things but I'd always advocate using what the browser gives you for free first! :D

Collapse
 
madza profile image
Madza

Yeah, reminds me of these two articles 😉👍
HTML can do that?
CSS can do that

Collapse
 
felixrunquist profile image
Felix

Love this succinct article - very helpful and it shows that sometimes implementing elements in CSS and JS is overkill!

Collapse
 
ismaelb381 profile image
Ismael Benitez

Thank you!

Collapse
 
xynnia profile image
Rebecca

Hey - this is a little bit of a "hail Mary" since this post is 3 years old, but I've tried everything I can think of to get this to work and so maybe I should just ask!

I love this code - it's so simple and functions just as I wanted it to. However, when I implemented it on my site and wrapped a <li> tag around the <span class="icon">, the rotate animation stopped working. I assume this is because the code is not looking for a li span.icon, it's looking for a span.icon that's nested directly within a summary tag only. However, I can't seem to edit the code to tell it to expect the li tag and rotate anyway. I've tried all kinds of variations to indicate parent, child, descendant relationships and it still refuses to rotate. I must be missing something obvious but I can't think what it is. Does that make sense? Do you know what the answer might be?

Thank you so much!

Collapse
 
jordanfinners profile image
Jordan Finneran

Hey, I wouldn't recommend nesting the span in a li tag. As ifs not really indicating a list item.
I would look at wrapping the content you want in the li tag.

If you did want to do that however you could change the following in CSS.
Anywhere you see summary span.icon change it to summary li>span.icon

The arrow indicates the span is a child of the li element 😊
Hope that helps

Collapse
 
windmaomao profile image
Fang Jin

The tricky part of this piece is always the height of the invisible elements as well as the potential height when it's not visible.

Collapse
 
jordanfinners profile image
Jordan Finneran

Yes, the times I've used it so far, its normally in a group of a few collapsible sections so I've never had to worry about the height too much as I use CSS flex :)

Collapse
 
jordanfinners profile image
Jordan Finneran

What tricks are you having with height? Maybe its something we could work through :D

Collapse
 
iamgifted profile image
Gift Opia

Wow this is actually very handy.... Reduces the call for bootstrap or other frameworks classes

 
jordanfinners profile image
Jordan Finneran

Thank you, this means alot!
I'm going to cover off plenty more in this series! 😀

Collapse
 
oncode profile image
Manuel Sommerhalder

be aware, the summary/details element is not as accessible as a well implemented accordion pattern.

Collapse
 
jordanfinners profile image
Jordan Finneran

Do you have any links or anything to read up on this? :)
Its semantic HTML elements, so I couldn't see much being better.

Collapse
 
oncode profile image
Manuel Sommerhalder • Edited

the first point is that it is not even a semantic HTML element for an accordion, it's much more a disclose widget (also mentioned here accessibleculture.org/articles/201...).

You can compare them at the WAI-ARIA practices site:
w3.org/TR/wai-aria-practices-1.1/#...
w3.org/TR/wai-aria-practices-1.1/#...

The article above also states some accessibility problems the screen readers have with details/summary element. I quote:

If you must have one or more links nested in the summary, arrange them so that they are not the first things within the summary element. And even if you manage this, you should recognise that:

- these links still won't be in any way clearly identifiable to users of VoiceOver in Safari;
- these links still won't be available to JAWS in FF or Window-Eyes in both FF and IE when these screen readers are in Browse Mode; and,
- JAWS users with IE will have a less than ideal experience reading the summary's content.
Enter fullscreen mode Exit fullscreen mode

and another article:
scottohara.me/blog/2018/09/03/deta...

Thread Thread
 
jordanfinners profile image
Jordan Finneran

Thank you! Thats a really good note! :)

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Hmm, I knew about this but I didn't think it had styling potential. If it's cross browser for evergreens then this is worth knowing for sure. Symantec and accessibility 🦾

Collapse
 
alvaromontoro profile image
Alvaro Montoro

Nice post + reference to Hitchhiker's Guide to the Galaxy? Take all the ❤️🦄!

Collapse
 
jordanfinners profile image
Jordan Finneran

Thank you!