December 22, 2017
Well, it’s a little known fact (at least it was for me) that you can use native HTML tags are supported in Markdown, though the support over different sites is varying. I would say the code presented here should work on about 99% of pages - let me know if that’s not the case
To get this to work in most environments1 all we have to do is to make use of the
<details> tag. Since you probably want your dropdown to have a title, we also need to use the
<summary> tag. So a cool markdown dropdown could look as simple as this:
<details><summary>Cool Dropdown</summary><br> blah blah blah blah you found me! </details>
Or, rendered (go on and give the arrow a click!):
Of course, all goodies of markdown will work inside of this dropdown - lists, links, etc.
Here’s a bigger example for your copypasta pleasure:
<p> <details><summary>Cool Dropdown #1</summary><br> ```js // so wow, much amazing... you can even put code in these drop downs! document.getElementById('root') ```s [Or a link - like to google](https://google.com) - Or a List - or a nested List - like this - with 😄 emojis - Like this Or even just normal text </details> <details><summary>Cool Dropdown #2</summary><br> More cool text hiding in my dropdown </details> <details><summary>Cool Dropdown #3</summary><br> Easter egg! 🥚🥚🥚 </details> </p>
Rendered on this page, that snippet looks like this:
Or a List Or even just normal text More cool text hiding in my dropdown Easter egg! 🥚🥚🥚
Cool Dropdown #1
// so wow, much amazing... you can even put code in these drop downs!
Cool Dropdown #2
Cool Dropdown #3
Or a List
Or even just normal text
More cool text hiding in my dropdown
Easter egg! 🥚🥚🥚
I for one am going to start using this in my README’s. After all, it is the first page a lot of developers and users see, so using these dropdowns would be a nice simple way to keep your README uncluttered and organized - the communitiy at large will benefit and thank you for piece-wise docs.