HTML 5 collapsable information - works in a Github/Gitlab issue

HTML5 has bought many great things to this world. Among them lay the <details> tag. Not supported in IE the <details> tag allows for a quick show/hide functionality which so happens to work in Markdown. This means Github and Gitlab issues can be tidied up.

I was submitting an issue today that included a big chunk of code which would only mean something to the author of the code. Rather than fill up the issue with a code block (making if harder for others to identify if they were having the same issue) I was able to wrap it in a details block to create a browser handled toggle box.

<details>
	<summary>Title of your toggle box (what is inside)</summary>
	Contents of your toggle box (including code if you wish)
</details>

This makes a nice little toggle box. You can see it in action in the issue.

View this post on Github

You might also enjoy…

  • Rarely handy Git commands

    15th May 2017

    Rarely handy Git commands

    There are rare times when you need a slightly obscure git command. You spent several minutes googling, crafting and constructing your command only to run it once and not need it again for a while. This blog post will serve as my dumping ground for those odd commands I seldom need, but when I do I can then copy and paste. Feel free to get in touch with your favourite curve-ball command and I'll do my best to add it to the list!

Mike Street

Written by Mike Street

Mike is a CTO and Lead Developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Mastodon.