test-details

Just testing the <details> element. Per this Mozilla documentation (scroll to the bottom), the details element works in every modern browser except Microsoft Edge (and IE), but it is in the development queue for Edge.


Some questions:

Why am I interested in this <details> element?

Because it allows us to hide some detailed text on a page WITHOUT relying on JavaScript.

How will these look on our site?

I have no idea – hence this page.

Can we style them?

Definitely… we just need “someone” to create the appropriate CSS.

Do we care about the Edge/IE users?

Currently about 4% of our traffic is for IE and 3.5% for Edge.

How will this look in Edge/IE?

Ivana test it. In Edge you just see all the text, without the collapsing. So it still looks fine.

Do they always have to be collapsed? Can an answer be always visible?

They do not have to be collapsed by default. All you do is add the “open” attribute, as in <details open>, as I did for this example

How do these look on mobile?

Don’t know yet…

What happens if you print a page with collapsed sections?

Don’t know… I would hope it only prints what is visible.

How do these work for accessibility?

From what I read, better than JavaScript options! It seems that screen readers and other tools can work with these elements.

Do you have to use questions?

No! You could imagine this working nicely for the sections of a paper. Collapse it all so that you only see the high level headings… and then expand them as needed.


Here is a great example: https://codepen.io/jdsteinbach/full/GYmQjo/