Toggle Boxes Example?

[jpdevries]

Thoughtbot has a post with some examples and one of them is Toggle Boxes. You Don't Need JavaScript for That! https://robots.thoughtbot.com/you-don-t-need-javascript-for-that

I've forked their Codepen and updated it to use <details>

Codepen

http://codepen.io/jpdevries/pen/kkjpBJ?editors=1100

I'm not sure if it is ok for <dd> and <dt> to not be in the same immediate parent but the example is also marked up FAQ style.

[opattison]

<details> support still isn’t as good as it should be (although it looks like it finally landed in Firefox in recent weeks). No IE, no Edge, no Opera Mini.

You can argue that the “show/hide” interaction missing with <details> of opening and closing is not essential and that the content displays fine either way, which is technically true from a progressive enhancement perspective, but does miss the point of having a progressive disclosure pattern of some sort. Until it‘s at least in Edge, I find it hard to recommend using <details> without a polyfill (or a progressively enhanced JS toggle, which is probably a lighter and more responsible solution in terms of markup and scripting).

For your CodePen demo, mind the Firefox visual styling:

The CSS override being used with ::-webkit-details-marker doesn’t work and I’m not sure if there is a moz or prefix-less equivalent.

[jpdevries]

Sometimes it takes a really long time for new features to land (look at the Ambient Light API, colorpicker, datepicker) so that's why I think it is important to show what can be done even if it isn't supported well enough for production. The more people that know about it the more up votes for those features.

The CSS override being used with ::-webkit-details-marker doesn’t work and I’m not sure if there is a moz or prefix-less equivalent.

I can't find one either :( Looking through Bugzilla might need to open an issue for that feature.

[opattison]

Fair enough. I think you can definitely make arguments for showing examples without 100% support (depending on the goals of this project). And it is just like the color picker example which doesn’t yet have support in a couple of major browsers, so it is probably a good fit.

Interestingly <details> landed in the current version of Firefox (which took 5+ years after Google Chrome). I‘ve had my eye on it for the past few years since it‘s such a common pattern for progressive disclosure.

[opattison]

@jpdevries Here’s a Firefox fix: http://codepen.io/opattison/pen/ORoJoE?editors=1100

(set summary to display: block I found this method by viewing source on https://developer.microsoft.com/en-us/microsoft-edge/platform/status/detailssummary/ surprisingly)

[jpdevries]

@opattison that is awesome!!! Thank you for the Firefox fix.

Ya, I think <details> is a great example of an asynchronous interaction (toggle) without JavaScript or without the input based CSS hacks.