Details Element for HTML5 Disclosures

http://cssway.thebigerns.com/workbench/html5-details-element/

I’ve been listening in on another thread where there’s been some very interesting discussion about using javascript to create disclosures… you know, those hidden thingies with the triangle button that you can toggle open to reveal additional information?

What if I told you there was a way to accomplish this without scripting?

There’s this HTML5 element that has been quietly waiting in the wings called the details element which incorporates your basic disclosure widget functionality. It enjoys good support from browsers and devices, but what has me excited is that in those browsers and devices which lack support for it, the details element will display in the “open” position, making sure that hidden content isn’t lost because of lack of support. Even better, it is easily styled with CSS!

Now, I should say that from a UI point of view I’m not a fan of “hidden” content… that said, I can say that such a feature could be useful and even righteous. So, with all declarations out of the way, here is an example that I built-- with some notes and a downloadable Freeway file.

http://cssway.thebigerns.com/workbench/html5-details-element/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Interesting stuff as always Ernie - this deserves a closer look.

Use the HTML5 Element action that came with this file download

Only as embedded in the file. Are you going to share a link to the actual action?

David


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

For some reason I thought that an embedded action could be extracted… well, for others who cannot here is a link…

https://dl.dropboxusercontent.com/u/27331610/cssway/HTML5-action%2Bdetails.zip

if you are using the original action or have modded your copy, be sure to remove it from the actions folder before adding this one or you may overwrite it.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Also, updated with a link on the workbench article:

http://cssway.thebigerns.com/workbench/html5-details-element/


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Now, I should say that from a UI point of view I’m not a fan of “hidden” content…

I presume because most people don’t approach such things from the “progressive enhancement” point-of-view? If so, then I would agree with you (myself being a fan of hidden content).

Even if js is used it’s easy to take it one step further to ensure hidden content is visible when js is missing, yet people don’t seem to want to put the effort in. It’s strange.

Of course the ‘details’ element is more elegant but I’m just sayin’ for those who don’t know.

Todd
https://qreativ.space
First, RTFM. Then ask.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

In my (so far) limited testing it appears that the

element doesn’t have to be first inside the
element to work.

However to keep everything semantically correct I guess it is the way to go.

And it works in Reader too.

D


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

##First Todd wrote:

I presume because most people don’t approach such things from the “progressive enhancement” point-of-view? If so, then I would agree with you (myself being a fan of hidden content).

Yes, Progressive Enhancement is the Right Thing… but on a logical level, it also seems to me a bit absurd to hide content in the first place. Is the content not relevant to the topic at hand? Is the knowing of it so trivial that users should be required to make additional choices beyond choosing to view my page in the first place? The Editor in me wonders what reason there is to delay presentation or require extra effort-- and this makes me question the value of such content to begin with.

Of course, I can imagine scenarios where additional choices can refine user experience rather than frustrate it-- such as FAQs and such where users can determine which direction content delivery should take for them before we get to the level of New Topic/New Page.

→ Click here for more details:

It’s a gray area… with potential for design success ( or design failure ) which means after all my serious yap about it, that I will probably go out of my way to feature it in the next project just to show how “cool” I can be. :stuck_out_tongue:

First, RTFM. Then ask.

LMAO :slight_smile:

##Then Dave wrote:

In my (so far) limited testing it appears that the element doesn’t have to be first inside the

element to work. However to keep everything semantically correct I guess it is the way to go.

I discovered that as well, when I was inserting the summary element as a markup item and then having to deal with the paragraph tags. The summary tag need not even be present and the element still works. When present, however, the requirement for summary is only that it present as a child of the details element-- so the flow order isn’t technically important-- until you try nesting them!

Thanks to you both for looking at this :slight_smile:


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

I can certainly appreciate that perspective, and I’ve often asked myself the same things, but I find it’s not always that simple.

Sometimes it’s about me wanting to hit a certain aesthetic goal just as much as it’s about UX. Personally, there are times when I don’t want to be presented with all the information at once.

But that’s me.

Todd
https://qreativ.space
First, RTFM. Then ask.

but on a logical level, it also seems to me a bit absurd to hide content in the first place. Is the content not relevant to the topic at hand? Is the knowing of it so trivial that users should be required to make additional choices beyond choosing to view my page in the first place? The Editor in me wonders what reason there is to delay presentation or require extra effort-- and this makes me question the value of such content to begin with.


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Hi Ernie,

you mentioned in your article, that the Remove Paragraph Tag will “shake” sorting orders of DIVs. This happened to me as well and Tim reviewed this action (a lil bug in). It should be version 2.2 (at least this is the one I currently have in use).

All the rest guys is so interesting. I love discussing progressive enhancement (which is to me the technical part) and progressive enrichment (which could be seen as the “designerish” part).

It’s kind of attitude. And the HTML5 approach is exciting worth a detailed look.

Cheers

Thomas

Side note:

I solve it currently by JS and call it Collapsible:

https://dl.dropboxusercontent.com/u/8231701/cdn-digitalmedia-themes/theGridMaterialz/collapsible.html


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options

Progressive Enhancement

“When an elevator fails, it’s useless. When an escalator fails, it becomes stairs. We should be building escalators, not elevators.”

It’s not me saying this, it’s Jeremy Keith (one of my favorite talker and writer ever).

This HTML5 example is, technically spoken, kind of prime example. But it naturally doesn’t answer the question how much sense it makes hiding content for later reveal.

Cheers

Thomas


freewaytalk mailing list
email@hidden
Update your subscriptions at:
https://freewaytalk.softpress.com/person/options