I spend a lot of time working in issue trackers (e.g. GitHub), which involves writing a lot of markdown. Sometimes, perhaps I write too much information and it would be nice to allow the person reading to optionally skip some details. Traditionally, I accomplish this with a Summary section but now with collapsible sections in GitHub Issues, I can write even tidier comments.

Example

Here is an example of a GitHub Issue comment with a collapsible area (click “Long list of technical details”) to see all the information.

Lorem Ispum

Lorem ipsum dolor sit amet

Long list of technical details

All of the Nitty Gritty Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Convallis aenean et tortor at risus viverra adipiscing at in. Vitae auctor eu augue ut lectus arcu bibendum at varius. Sit amet nulla facilisi morbi tempus. Neque laoreet suspendisse interdum consectetur libero. Mattis pellentesque id nibh tortor id aliquet. At tempor commodo ullamcorper a. Ultrices eros in cursus turpis massa tincidunt. Eros in cursus turpis massa tincidunt dui ut. Pulvinar etiam non quam lacus suspendisse faucibus interdum.

Cursus risus at ultrices mi tempus imperdiet. Ut diam quam nulla porttitor massa id neque aliquam. Ac tincidunt vitae semper quis. Neque convallis a cras semper auctor neque vitae tempus. Sed viverra ipsum nunc aliquet bibendum enim facilisis. Aliquam etiam erat velit scelerisque in dictum non consectetur. Semper viverra nam libero justo. Eget velit aliquet sagittis id. Ut consequat semper viverra nam libero justo. Quis risus sed vulputate odio ut. Aliquet sagittis id consectetur purus ut faucibus pulvinar. Massa tincidunt nunc pulvinar sapien et. Id donec ultrices tincidunt arcu non sodales neque sodales ut. Volutpat blandit aliquam etiam erat velit scelerisque in dictum non. Nisl nunc mi ipsum faucibus vitae aliquet. Pharetra massa massa ultricies mi.

Varius quam quisque id diam vel. Ipsum dolor sit amet consectetur adipiscing elit ut aliquam. In tellus integer feugiat scelerisque varius. Est ullamcorper eget nulla facilisi etiam dignissim diam quis enim. A arcu cursus vitae congue. Erat imperdiet sed euismod nisi porta lorem mollis aliquam ut. Rhoncus aenean vel elit scelerisque mauris pellentesque. Quis lectus nulla at volutpat diam ut venenatis. A condimentum vitae sapien pellentesque habitant morbi tristique senectus et. Enim tortor at auctor urna nunc id cursus. Orci sagittis eu volutpat odio facilisis mauris. Id volutpat lacus laoreet non curabitur gravida arcu ac tortor. Dui vivamus arcu felis bibendum ut tristique et egestas. Vitae proin sagittis nisl rhoncus mattis.

Phasellus egestas tellus rutrum tellus pellentesque eu tincidunt. Porttitor leo a diam sollicitudin tempor id. In hac habitasse platea dictumst. Sed ullamcorper morbi tincidunt ornare massa. Quam elementum pulvinar etiam non. Sed sed risus pretium quam. Iaculis nunc sed augue lacus viverra vitae congue eu consequat. Lectus mauris ultrices eros in. Quam vulputate dignissim suspendisse in est ante in. Integer vitae justo eget magna fermentum iaculis eu non. Proin sed libero enim sed faucibus turpis in eu mi.

Aliquet lectus proin nibh nisl condimentum. Consectetur libero id faucibus nisl tincidunt eget nullam non nisi. Mattis rhoncus urna neque viverra. Pellentesque habitant morbi tristique senectus et netus. Sed enim ut sem viverra aliquet eget. Bibendum est ultricies integer quis auctor elit sed. Vitae et leo duis ut diam quam nulla porttitor. Mauris commodo quis imperdiet massa tincidunt nunc pulvinar sapien. Euismod lacinia at quis risus sed. Dui faucibus in ornare quam. Massa massa ultricies mi quis hendrerit. Pulvinar elementum integer enim neque. Tristique et egestas quis ipsum suspendisse ultrices gravida. Egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium vulputate. Urna condimentum mattis pellentesque id. Eu sem integer vitae justo. Morbi blandit cursus risus at ultrices mi.

view raw collapsible-section-in-github-issue.md hosted with ❤ by GitHub

Markup

This is created by wrapping the whole section in an opening and closing <details> tags. Within this tag, wrap your preview text with opening and closing <summary> tags and then any other content in the <details> tags will be hidden until clicked.

Example of a Collapsible Section in a GitHub Issue

<details>

<summary>Long list of technical details</summary>

### All of the Nitty Gritty Details

Lorem ipsum dolor sit amet, consectetur adipiscing elit...

</details>

GitHub Slash Command

Github Slash commands allow you to quickly insert some content. The /details command inserts the markup above.

Shout out to my co-worker Amor for pointing this out to me. Prior to that I was coming back to this blog post a lot to manually copy the markup and paste it in my GitHub issues.

Outside of GitHub

The <details> element (and <summary> element) are established standards and pretty well supported.

Photo Credit

kasaa on flickr

Sal Ferrarello (@salcode)

Sal is a PHP and JavaScript developer with a focus on the WordPress platform. He is a conference speaker with a background including Piano Player, Radio DJ, Magician/Juggler, Beach Photographer, and High School Math Teacher. Sal can be found professionally at WebDevStudios, where he works as a principal engineer.