1189515 - collapsible content areas within a page

Status: RESOLVED FIXED

(developer.mozilla.org Graveyard :: Wiki pages, enhancement)

Description

[Dietrich Ayala (:dietrich)]

What problem would this feature solve?
======================================
For longer pieces of content we have the option of long single-page guides, or linking out to many separate pages.

Long single-page documents are scary at first-glance, very difficult to navigate, and take a lot of scrolling to move around.

Link-out hubs result in content getting disconnected and sometimes unconnected from the hub, and also results in users having to jump out and back in to the main thrust of the guide repeatedly. You end up with tabsplosion, or backbuttonitis, or the worst: a combination of multiple tabs across the general content area but each with multiple levels of page navigation in them.

I've long wanted to create a nice single-page guide which is easily navigable via collapsible content areas. This would essential turn the section headers *into* the TOC, which would enable easy scanning and navigation in one shot, without sending readers away to different pages, tabs, etc.

I'd like to prototype a Gaia contribution guide with this approach. It's a connected and sequential series of content pieces that lead a contributor from zero to patch-landed.

We'd like to ship it this quarter, and I'd prefer to do so on MDN if this is possible :D

Who has this problem?
=====================
All visitors to MDN

How do you know that the users identified above have this problem?
==================================================================
I've not run any experiment or looked at user-trail data (do we have that?)

How are the users identified above solving this problem now?
============================================================
Reading very long pages, or experiencing tab explosion.

Do you have any suggestions for solving the problem? Please explain in detail.
==============================================================================
Described in the request title yo.

Is there anything else we should know?
======================================
You're awesome, keep it up.

Comment 1

[Stephanie Hobson [:shobson]]

MDN has a shim to give universal support for <details> and <summary> could you use those to achieve the effect you're after?

Comment 2

[Eric Shepherd [:sheppy]]

IIRC we have long-standing bugs hoping to implement a system for making it easy to implement a system for doing this.

Comment 3

[Luke Crouch [:groovecoder]]

Do the <summary> and <details> elements work for you?

Comment 4

[Eric Shepherd [:sheppy]]

Then what we need is UX to make this feature available to writers without having to drop into source editor.

Comment 5

[Dietrich Ayala (:dietrich)]

Thanks everyone! Can you point me at an example where <details> and <summary> were used like this, or the authoring docs for those?

Comment 6

[Stephanie Hobson [:shobson]]

You can see them in action here: https://developer.mozilla.org/en-US/fellowship It's not a wiki page unfortunately because we haven't used them on a wiki page yet but you can view source / inspect them.

For usage you can refer to the docs:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/summary
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

If you find a feature in the docs you want to use but won't work please let us know so we can update our shim.

Comment 7

[Dietrich Ayala (:dietrich)]

I wasn't able to replicate the usage of details + summary as was done in the Fellowship page.

https://developer.mozilla.org/en-US/docs/Gaia_Contribution_Pathway

Stephanie, can you take a look to see if I'm doing it correctly?

Comment 8

[Stephanie Hobson [:shobson]]

Oh wow, that is some bizarre behaviour.

I see three problems, all of which are on us (I don't think this has been used with the text editor before)
1) Summary is not in the list of tags allwoed in the text editor
2) We need some CSS on the wiki page to make the summary look clickable
3) CKEditor is not letting `<summary></summary>` nest or be nested in a heading.

I'm sorry :dietrich I thought this was ready for prime time and it clearly isn't.

Comment 9

[Stephanie Hobson [:shobson]]

Filed http://dev.ckeditor.com/ticket/13680#ticket with CKeditor

Comment 10

[Stephanie Hobson [:shobson]]

A few pushes have gone to production and there's a sample page here now:
https://developer.mozilla.org/en-US/docs/User%3Astephaniehobson%3Adetails

Fixed:
- details and summary are now allowed in CKEditor
- summary appears clickable

Still a problem:
- can't use headings inside summaries (CKEditor is already reviewing their patch for this!)
- "open" attribute on details is being stripped

Comment 11

[Stephanie Hobson [:shobson]]

Update: 

CKEditor fixed our bug and released a new version, it has been integrated into the MDN code base and will probably be pushed to production on Monday or Tuesday :)

Comment 12

[Stephanie Hobson [:shobson]]

In use on production here: https://developer.mozilla.org/en-US/docs/MDN/Contribute/Localize/Localization_projects

I'm going to close this bug :)

Comment 13

[Dietrich Ayala (:dietrich)]

Fantastic, thanks Stephanie!

Comment 14

[MDN Team (:mdn-dev)]

Commits pushed to master at https://github.com/mozilla/kuma

https://github.com/mozilla/kuma/commit/552cfc5ad7f176db2c10a8130021e6f96f4f867e
Bug 1189515: Details and summary

Added a bottom margin to the <details> element to preserve horizontal spacing (especially before headings).

Moved the CSS generated elements added in browsers that don't support <details> to the right.

Testing:
https://developer.mozilla.org/en-US/docs/User:stephaniehobson:details

https://github.com/mozilla/kuma/commit/82a5bbd74de4d49c863cca32c7ad250e7ea33573
Merge pull request #3762 from stephaniehobson/1189515-details-bottom-margin

Bug 1189515: Details and summary