DEV Community

loading...
Cover image for Creating a collapsible section with nothing but HTML

Creating a collapsible section with nothing but HTML

jordanfinners profile image Jordan Finneran Originally published at jordanfinners.dev ・Updated on ・2 min read

Contents

  1. Intro
  2. Details
  3. Examples
  4. Summary

Intro

I love creating User Interfaces (UI) and often times well need a section to expand and collapse for example in a FAQ section.

I used to reach for NPM and install a library to help, until I discovered that you can do this with pure HTML elements!

They aren't perhaps the most obviously named:

They have pretty great browser support.

Details

The details element is the element to contain the content we want to show and hide.
The summary element is caption to describe what is hidden, in an FAQ section this might be the question and the answer is hidden in the details element until it is expanded.

You can toggle the details element open and closed with JavaScript if needed in your use case by setting the open attribute on it.

It is also pretty straightforward to style the arrow, you can see this in the example below where I've used an emoji instead but this can be anything you want.

Examples

Shut up and show me the code.

Summary

In summary, you can use what browsers give you to create an expanding and collapsing section.
It will be accessible for all users as its semantic HTML.
It will be super quick to load as there is only HTML and a few lines of CSS.
It will be responsive to any screen size.

Happy building!

What else would you like to see in this Web Dev series?

Discussion (16)

pic
Editor guide
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 Author

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
bezpowell profile image
BezPowell

Especially as native HTML elements should already have all of the functionality and accessibility already implemented. Also, if browsers improve their implementations at a later date you get those improvements for free without having to do anything.

I only leant about details and summary recently myself. Thank you for helping to spread the word.

Thread Thread
jordanfinners profile image
Jordan Finneran Author

Thank you, this means alot!
I'm going to cover off plenty more in this series! πŸ˜€

Collapse
madza profile image
Madza

Yeah, reminds me of these two articles πŸ˜‰πŸ‘
HTML can do that?
CSS can do that

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 Author

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 Author

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

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
Collapse
giftstack profile image
Gift Opia

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

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 Author

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 Author

Thank you! Thats a really good note! :)