Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
"Dropdowns" in Markdown
How do I dropdown?
This is how you dropdown.

<details>
<summary>How do I dropdown?</summary>
<br>
This is how you dropdown.
</details>

Want to ruin the surprise?
Well, you asked for it!

<details open>
<summary>Want to ruin the surprise?</summary>
<br>
Well, you asked for it!
</details>
@rrichardsonv

This comment has been minimized.

Copy link

commented Aug 18, 2017

You... Just made my day
@FrenchBen

This comment has been minimized.

Copy link

commented Aug 22, 2017

Dropdown start open? Start with the dropdown shown instead of hidden. Thanks for the tip.
@Maxiride

This comment has been minimized.

Copy link

commented Sep 10, 2017

@FrenchBen how did you started with it opened?

@SteeveDroz

This comment has been minimized.

Copy link

commented Sep 20, 2017

How to start with open dropdown?
<details open>
  <summary>How to start with open dropdown?</summary>
    [ERROR] Self-reference
  </details>
@Ic3fr0g

This comment has been minimized.

Copy link

commented Oct 9, 2017

Currently the content contained does not fully markdown format -

Heading + markdown list 1 + nested list 1 + nested list 2 + markdown list 2

<details>
<summary>Heading</summary>
    + markdown list 1
        + nested list 1
        + nested list 2
    + markdown list 2
</details>



Doing it in HTML seems like the only way to do it-

Heading
  • markdown list 1
    • nested list 1
    • nested list 2
  • markdown list 2

<details>
<summary>Heading</summary>
<ul>
<li> markdown list 1</li>
<ul>
<li> nested list 1</li>
<li> nested list 2</li>
</ul>
<li> markdown list 2</li>
</ul>
</details>

I would love to see Mardown incorporating dropdown lists as well. Nevertheless, awesome gist!
@clankill3r

This comment has been minimized.

Copy link

commented Dec 14, 2017

@lc3fr0g

You did it wrong:

Heading
  • markdown list 1
    • nested list 1
    • nested list 2
  • markdown list 2

<details>
<summary>Heading</summary>

+ markdown list 1
    + nested list 1
    + nested list 2
+ markdown list 2

</details>
@parejadan

This comment has been minimized.

Copy link

commented Jan 20, 2018

TLDR
    1. details for container
    1. summary tag for drop-down dispaly
    1. new line between summary tag and first list item
    1. "+" to initiate list item
    1. (optional) " +" to do sub-item
    1. (bonus) indentation cause you care doesn't render as intended
@anselal

This comment has been minimized.

Copy link

commented Mar 30, 2018

Great !!! Thnx !!!

PS: The details tag should close at the end like

@alexey-igrychev

This comment has been minimized.

Copy link

commented Jun 27, 2018

Awesome!

@itsN1X

This comment has been minimized.

Copy link

commented Jul 6, 2018

Well ...
ThisRenders
This2Renders2
This3SuRenders

!=new

## Okay, real TL;DR
This entire code, RAW: Read all? ```
Well ...
ThisRenders
This2Renders2
This3SuRenders

!=new

Okay, real TL;DR
This entire code, RAW: Read all?
Well ...
ThisRenders
This2Renders2
This3SuRenders

!=new

## Okay, real TL;DR
This entire code, RAW: Read all? ```
Well ...
ThisRenders
This2Renders2
This3SuRenders

!=new

Okay, real TL;DR
This entire code, RAW: Read all, senor chummy?
@YaFou

This comment has been minimized.

Copy link

commented Oct 31, 2018

Thank you !

@Kevin-De-Koninck

This comment has been minimized.

Copy link

commented Dec 17, 2018

don't you miss a / in the closing <details>?

@Falnesio

This comment has been minimized.

Copy link

commented Dec 23, 2018

Can I add an Image in <summary></summary> ?

@Ic3fr0g

This comment has been minimized.

Copy link

commented Jan 16, 2019

@itsN1X WOW! 👍
And @clankill3r, thanks!

@agirault

This comment has been minimized.

Copy link

commented Jan 17, 2019

Missing / in the closing <details> -> </details>

@anuudb

This comment has been minimized.

Copy link

commented Jan 28, 2019

Thank you

@citrusui

This comment has been minimized.

Copy link
Owner Author

commented Apr 27, 2019

@anselal @Kevin-De-Koninck @agirault Thanks for noticing the missing forward slash! I updated this gist to fix this.

@erinfoleary

This comment has been minimized.

Copy link

commented May 9, 2019

hi! Is it possible to replace the little arrow with an image?

@dhairyagabha

This comment has been minimized.

Copy link

commented Jul 5, 2019

Trying the dropdown
This just worked.
@hedyhyry

This comment has been minimized.

Copy link

commented Jul 30, 2019

Oh wow
Thank you so much...
@securITymania

This comment has been minimized.

Copy link

commented Aug 2, 2019

How I put the below code in the dropdown

$input = '<script>alert(1);</script>';
echo htmlspecialchars($input);
echo htmlentities($input);
?> ```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.