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.

This website is currently having a full content audit - apologies if some of the code or content looks a bit funky!

View this post on Gitlab

You might also enjoy…

  • Rarely handy Git commands

    Posted on 15th May 2017.

    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!

  • Multiple transition delays

    Posted on 3rd May 2017.

    Being able to animate with CSS transitions is great, although there are a few gotchas when using them. This one with transition-delay had me scratching my head for a while.

Mike Street

Written by Mike Street

Mike is a front-end developer from Brighton, UK. He spends his time writing, cycling and coding. You can find Mike on Twitter.