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.
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:
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.
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.
First, RTFM. Then ask.
LMAO
##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!
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
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.
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:
“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:
