Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
HTML5 <details> in GitHub

Using <details> in GitHub

Suppose you're opening an issue and there's a lot noisey logs that may be useful.

Rather than wrecking readability, wrap it in a <details> tag!

<details>
 <summary>Summary Goes Here</summary>
 ...this is hidden, collapsable content...
</details>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

Example

Hey guys, I just this problem with Node v4.1.1. Apparently you can't require files that don't exist! plz fix.

Stack Trace for `require('does.not.exist')` ```shell require('does.not.exist') Error: Cannot find module 'does.not.exist' at Function.Module._resolveFilename (module.js:336:15) at Function.Module._load (module.js:286:25) at Module.require (module.js:365:17) at require (module.js:384:17) at repl:1:1 at REPLServer.defaultEval (repl.js:164:27) at bound (domain.js:250:14) at REPLServer.runBound [as eval] (domain.js:263:12) at REPLServer. (repl.js:393:12) at emitOne (events.js:82:20) ```

Note that the <details> triangle will not be visible in Firefox with GitHub's current CSS, so it won't be obvious that it is clickable.

Related bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1283989
Workaround: StylishThemes/GitHub-Dark@20c524d

Mottie commented Jul 2, 2016

I recently created a userscript that will collapse long blocks of code and quote blocks for times when people don't use <details>... currently it adds a clickable <div> to toggle the content; I thought about using a details > summary wrapper, but it doesn't seem to be working in my Firefox browser...

Unfortunately doesn't collapse anything on FF mobile.

See https://gist.github.com/ericclemmons/b146fe5da72ca1f706b2ef72a20ac39d

This is how the spec says things are supposed to work. In particular, https://html.spec.whatwg.org/multipage/rendering.html#the-details-and-summary-elements describes default styles for summary that cause the disclosure triangle to be rendered as long as the summary is display:list-item.

I don't think Chromium has updated to the new (first?) spec rules for how the disclosure triangle interacts with style.

So it seems that per the current requirements in the HTML spec, Firefox is behaving as expected by not displaying the disclosure triangle, and Chrome by displaying it is not conforming to the requirements.

upsuper commented Jul 3, 2016

And Firefox actually starts supporting <details>/<summary> since Firefox 49.

jetsgit commented Jul 4, 2016

Well, could be très cool to hide my nasty stack trace!

Lot of stuff going on here, what it is?

slim (3.0.7) lib/slim/parser.rb:513:in syntax_error!' slim (3.0.7) lib/slim/parser.rb:259:inunknown_line_indicator'
slim (3.0.7) lib/slim/parser.rb:250:in parse_line_indicators' slim (3.0.7) lib/slim/parser.rb:192:inparse_line'
slim (3.0.7) lib/slim/parser.rb:95:in call' temple (0.7.7) lib/temple/engine.rb:50:inblock in call'
temple (0.7.7) lib/temple/engine.rb:50:in each' temple (0.7.7) lib/temple/engine.rb:50:ininject'
temple (0.7.7) lib/temple/engine.rb:50:in call' temple (0.7.7) lib/temple/mixins/template.rb:10:incompile'
temple (0.7.7) lib/temple/templates/tilt.rb:30:in prepare' tilt (2.0.5) lib/tilt/template.rb:92:ininitialize'
sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:in new' sprockets (3.6.2) lib/sprockets/legacy_tilt_processor.rb:25:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/bundle.rb:23:inblock in call'
sprockets (3.6.2) lib/sprockets/utils.rb:196:in dfs' sprockets (3.6.2) lib/sprockets/bundle.rb:24:incall'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:75:in call_processor' sprockets (3.6.2) lib/sprockets/processor_utils.rb:57:inblock in call_processors'
sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:in reverse_each' sprockets (3.6.2) lib/sprockets/processor_utils.rb:56:incall_processors'
sprockets (3.6.2) lib/sprockets/loader.rb:134:in load_from_unloaded' sprockets (3.6.2) lib/sprockets/loader.rb:60:inblock in load'
sprockets (3.6.2) lib/sprockets/loader.rb:317:in fetch_asset_from_dependency_cache' sprockets (3.6.2) lib/sprockets/loader.rb:44:inload'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:20:in block in initialize' sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:inyield'
sprockets (3.6.2) lib/sprockets/cached_environment.rb:47:in load' sprockets (3.6.2) lib/sprockets/base.rb:66:infind_asset'
sprockets (3.6.2) lib/sprockets/base.rb:73:in find_all_linked_assets' sprockets (3.6.2) lib/sprockets/manifest.rb:142:inblock in find'
sprockets (3.6.2) lib/sprockets/legacy.rb:114:in block (2 levels) in logical_paths' sprockets (3.6.2) lib/sprockets/path_utils.rb:225:inblock in stat_tree'
sprockets (3.6.2) lib/sprockets/path_utils.rb:209:in block in stat_directory' sprockets (3.6.2) lib/sprockets/path_utils.rb:206:ineach'
sprockets (3.6.2) lib/sprockets/path_utils.rb:206:in stat_directory' sprockets (3.6.2) lib/sprockets/path_utils.rb:224:instat_tree'
sprockets (3.6.2) lib/sprockets/legacy.rb:105:in each' sprockets (3.6.2) lib/sprockets/legacy.rb:105:inblock in logical_paths'
sprockets (3.6.2) lib/sprockets/legacy.rb:104:in each' sprockets (3.6.2) lib/sprockets/legacy.rb:104:inlogical_paths'
sprockets (3.6.2) lib/sprockets/manifest.rb:140:in find' sprockets-rails (3.1.1) lib/sprockets/railtie.rb:50:ineach'
sprockets-rails (3.1.1) lib/sprockets/railtie.rb:50:in map' sprockets-rails (3.1.1) lib/sprockets/railtie.rb:50:inprecompiled_assets'
sprockets-rails (3.1.1) lib/sprockets/railtie.rb:35:in asset_precompiled?' sprockets-rails (3.1.1) lib/sprockets/railtie.rb:250:inblock (3 levels) in class:Railtie'
sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:342:in call' sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:342:inprecompiled?'
sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:346:in raise_unless_precompiled_asset' sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:331:infind_debug_asset'
sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:212:in block in lookup_debug_asset' sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:225:inblock in resolve_asset'
sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:224:in each' sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:224:indetect'
sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:224:in resolve_asset' sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:211:inlookup_debug_asset'
sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:153:in block in stylesheet_link_tag' sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:152:inmap'
sprockets-rails (3.1.1) lib/sprockets/rails/helper.rb:152:in stylesheet_link_tag' actionview (4.2.6) lib/action_view/template.rb:145:inblock in render'
activesupport (4.2.6) lib/active_support/notifications.rb:166:in instrument' actionview (4.2.6) lib/action_view/template.rb:333:ininstrument'
actionview (4.2.6) lib/action_view/template.rb:143:in render' actionview (4.2.6) lib/action_view/renderer/template_renderer.rb:54:inblock (2 levels) in render_template'
actionview (4.2.6) lib/action_view/renderer/abstract_renderer.rb:39:in block in instrument' activesupport (4.2.6) lib/active_support/notifications.rb:164:inblock in instrument'
activesupport (4.2.6) lib/active_support/notifications/instrumenter.rb:20:in instrument' activesupport (4.2.6) lib/active_support/notifications.rb:164:ininstrument'
actionview (4.2.6) lib/action_view/renderer/abstract_renderer.rb:39:in instrument' actionview (4.2.6) lib/action_view/renderer/template_renderer.rb:53:inblock in render_template'
actionview (4.2.6) lib/action_view/renderer/template_renderer.rb:61:in render_with_layout' actionview (4.2.6) lib/action_view/renderer/template_renderer.rb:52:inrender_template'
actionview (4.2.6) lib/action_view/renderer/template_renderer.rb:14:in render' actionview (4.2.6) lib/action_view/renderer/renderer.rb:46:inrender_template'
actionview (4.2.6) lib/action_view/renderer/renderer.rb:27:in render' actionview (4.2.6) lib/action_view/rendering.rb:100:in_render_template'
actionpack (4.2.6) lib/action_controller/metal/streaming.rb:217:in _render_template' actionview (4.2.6) lib/action_view/rendering.rb:83:inrender_to_body'
actionpack (4.2.6) lib/action_controller/metal/rendering.rb:32:in render_to_body' actionpack (4.2.6) lib/action_controller/metal/renderers.rb:37:inrender_to_body'
actionpack (4.2.6) lib/abstract_controller/rendering.rb:25:in render' actionpack (4.2.6) lib/action_controller/metal/rendering.rb:16:inrender'
actionpack (4.2.6) lib/action_controller/metal/instrumentation.rb:44:in block (2 levels) in render' activesupport (4.2.6) lib/active_support/core_ext/benchmark.rb:12:inblock in ms'
/Users/jet/.rvm/rubies/ruby-2.2.4/lib/ruby/2.2.0/benchmark.rb:303:in realtime' activesupport (4.2.6) lib/active_support/core_ext/benchmark.rb:12:inms'
actionpack (4.2.6) lib/action_controller/metal/instrumentation.rb:44:in block in render' actionpack (4.2.6) lib/action_controller/metal/instrumentation.rb:87:incleanup_view_runtime'
activerecord (4.2.6) lib/active_record/railties/controller_runtime.rb:25:in cleanup_view_runtime' actionpack (4.2.6) lib/action_controller/metal/instrumentation.rb:43:inrender'
actionpack (4.2.6) lib/action_controller/metal/implicit_render.rb:4:in send_action' actionpack (4.2.6) lib/abstract_controller/base.rb:198:inprocess_action'
actionpack (4.2.6) lib/action_controller/metal/rendering.rb:10:in process_action' actionpack (4.2.6) lib/abstract_controller/callbacks.rb:20:inblock in process_action'
activesupport (4.2.6) lib/active_support/callbacks.rb:117:in call' activesupport (4.2.6) lib/active_support/callbacks.rb:117:incall'
activesupport (4.2.6) lib/active_support/callbacks.rb:555:in block (2 levels) in compile' activesupport (4.2.6) lib/active_support/callbacks.rb:505:incall'
activesupport (4.2.6) lib/active_support/callbacks.rb:505:in call' activesupport (4.2.6) lib/active_support/callbacks.rb:92:inrun_callbacks'
activesupport (4.2.6) lib/active_support/callbacks.rb:778:in _run_process_action_callbacks' activesupport (4.2.6) lib/active_support/callbacks.rb:81:inrun_callbacks'
actionpack (4.2.6) lib/abstract_controller/callbacks.rb:19:in process_action' actionpack (4.2.6) lib/action_controller/metal/rescue.rb:29:inprocess_action'
actionpack (4.2.6) lib/action_controller/metal/instrumentation.rb:32:in block in process_action' activesupport (4.2.6) lib/active_support/notifications.rb:164:inblock in instrument'
activesupport (4.2.6) lib/active_support/notifications/instrumenter.rb:20:in instrument' activesupport (4.2.6) lib/active_support/notifications.rb:164:ininstrument'
actionpack (4.2.6) lib/action_controller/metal/instrumentation.rb:30:in process_action' actionpack (4.2.6) lib/action_controller/metal/params_wrapper.rb:250:inprocess_action'
activerecord (4.2.6) lib/active_record/railties/controller_runtime.rb:18:in process_action' actionpack (4.2.6) lib/abstract_controller/base.rb:137:inprocess'
actionview (4.2.6) lib/action_view/rendering.rb:30:in process' actionpack (4.2.6) lib/action_controller/metal.rb:196:indispatch'
actionpack (4.2.6) lib/action_controller/metal/rack_delegation.rb:13:in dispatch' actionpack (4.2.6) lib/action_controller/metal.rb:237:inblock in action'
actionpack (4.2.6) lib/action_dispatch/routing/route_set.rb:74:in call' actionpack (4.2.6) lib/action_dispatch/routing/route_set.rb:74:indispatch'
actionpack (4.2.6) lib/action_dispatch/routing/route_set.rb:43:in serve' actionpack (4.2.6) lib/action_dispatch/journey/router.rb:43:inblock in serve'
actionpack (4.2.6) lib/action_dispatch/journey/router.rb:30:in each' actionpack (4.2.6) lib/action_dispatch/journey/router.rb:30:inserve'
actionpack (4.2.6) lib/action_dispatch/routing/route_set.rb:817:in call' rack (1.6.4) lib/rack/etag.rb:24:incall'
rack (1.6.4) lib/rack/conditionalget.rb:25:in call' rack (1.6.4) lib/rack/head.rb:13:incall'
actionpack (4.2.6) lib/action_dispatch/middleware/params_parser.rb:27:in call' actionpack (4.2.6) lib/action_dispatch/middleware/flash.rb:260:incall'
rack (1.6.4) lib/rack/session/abstract/id.rb:225:in context' rack (1.6.4) lib/rack/session/abstract/id.rb:220:incall'
actionpack (4.2.6) lib/action_dispatch/middleware/cookies.rb:560:in call' activerecord (4.2.6) lib/active_record/query_cache.rb:36:incall'
activerecord (4.2.6) lib/active_record/connection_adapters/abstract/connection_pool.rb:653:in call' activerecord (4.2.6) lib/active_record/migration.rb:377:incall'
actionpack (4.2.6) lib/action_dispatch/middleware/callbacks.rb:29:in block in call' activesupport (4.2.6) lib/active_support/callbacks.rb:88:inrun_callbacks'
activesupport (4.2.6) lib/active_support/callbacks.rb:778:in _run_call_callbacks' activesupport (4.2.6) lib/active_support/callbacks.rb:81:inrun_callbacks'
actionpack (4.2.6) lib/action_dispatch/middleware/callbacks.rb:27:in call' actionpack (4.2.6) lib/action_dispatch/middleware/reloader.rb:73:incall'
actionpack (4.2.6) lib/action_dispatch/middleware/remote_ip.rb:78:in call' actionpack (4.2.6) lib/action_dispatch/middleware/debug_exceptions.rb:17:incall'
web-console (2.3.0) lib/web_console/middleware.rb:28:in block in call' web-console (2.3.0) lib/web_console/middleware.rb:18:incatch'
web-console (2.3.0) lib/web_console/middleware.rb:18:in call' actionpack (4.2.6) lib/action_dispatch/middleware/show_exceptions.rb:30:incall'
railties (4.2.6) lib/rails/rack/logger.rb:38:in call_app' railties (4.2.6) lib/rails/rack/logger.rb:20:inblock in call'
activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:in block in tagged' activesupport (4.2.6) lib/active_support/tagged_logging.rb:26:intagged'
activesupport (4.2.6) lib/active_support/tagged_logging.rb:68:in tagged' railties (4.2.6) lib/rails/rack/logger.rb:20:incall'
actionpack (4.2.6) lib/action_dispatch/middleware/request_id.rb:21:in call' rack (1.6.4) lib/rack/methodoverride.rb:22:incall'
rack (1.6.4) lib/rack/runtime.rb:18:in call' activesupport (4.2.6) lib/active_support/cache/strategy/local_cache_middleware.rb:28:incall'
rack (1.6.4) lib/rack/lock.rb:17:in call' actionpack (4.2.6) lib/action_dispatch/middleware/static.rb:120:incall'
rack (1.6.4) lib/rack/sendfile.rb:113:in call' railties (4.2.6) lib/rails/engine.rb:518:incall'
railties (4.2.6) lib/rails/application.rb:165:in call' rack (1.6.4) lib/rack/lock.rb:17:incall'
rack (1.6.4) lib/rack/content_length.rb:15:in call' rack (1.6.4) lib/rack/handler/webrick.rb:88:inservice'
/Users/jet/.rvm/rubies/ruby-2.2.4/lib/ruby/2.2.0/webrick/httpserver.rb:138:in service' /Users/jet/.rvm/rubies/ruby-2.2.4/lib/ruby/2.2.0/webrick/httpserver.rb:94:inrun'
/Users/jet/.rvm/rubies/ruby-2.2.4/lib/ruby/2.2.0/webrick/server.rb:294:in `block in start_thread'
Request

Parameters:

None
Toggle session dump
Toggle env dump
Response

Headers:

None
x

How nifty is this!

silverwind commented Jul 5, 2016

The Firefox (49+) arrow issue should be resolved with necolas/normalize.css#604.
Looks like the Chromium team is also looking to resolve the spec issue: https://bugs.chromium.org/p/chromium/issues/detail?id=590014.

Xrymz commented Sep 27, 2016

add cursor: pointer please

sheeit commented Dec 28, 2016

@silverwind I'm using Firefox, and I can see the arrow, so I guess it's fixed now.
Screenshot of Firefox 50.1.0 showing the <summary> arrow

It seems like Markdown is no longer parsed inside details tags

For example ```sh echo What happened? ```

yozlet commented Mar 29, 2017

Markdown's supported, as long as you have a blank line between the </summary> tag and the following content. Apparently kramdown is very sensitive to missing blank lines.

Without blank lines ... formatting like _italics_, **bold**, etc. all fail, just because there's a missing line. > Blockquote without a precending blank line is assumed to belong to the previous line ``` and the same with code blocks. ```
With blank lines

... formatting like italics, bold, linking and monotype works.

Blockquote works!

Code works!

As always, the Preview tab is your friend.

gre commented Sep 5, 2017

It does not work on a README.md file on a repo but only in the github issues , correct?

I really love this details tag, but now i still confused give numbering inside the details tag.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment