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

@rrichardsonv rrichardsonv commented Aug 18, 2017

You... Just made my day
@FrenchBen

This comment has been minimized.

Copy link

@FrenchBen FrenchBen 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

@maxiride maxiride commented Sep 10, 2017

@FrenchBen how did you started with it opened?

@SteeveDroz

This comment has been minimized.

Copy link

@SteeveDroz SteeveDroz 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

@Ic3fr0g Ic3fr0g 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

@clankill3r clankill3r 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

@parejadan parejadan 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

@anselal anselal 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

@alexey-igrychev alexey-igrychev commented Jun 27, 2018

Awesome!

@itsN1X

This comment has been minimized.

Copy link

@itsN1X itsN1X 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

@YaFou YaFou commented Oct 31, 2018

Thank you !

@Kevin-De-Koninck

This comment has been minimized.

Copy link

@Kevin-De-Koninck Kevin-De-Koninck commented Dec 17, 2018

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

@Falnesio

This comment has been minimized.

Copy link

@Falnesio Falnesio commented Dec 23, 2018

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

@Ic3fr0g

This comment has been minimized.

Copy link

@Ic3fr0g Ic3fr0g commented Jan 16, 2019

@itsN1X WOW! 👍
And @clankill3r, thanks!

@anuudb

This comment has been minimized.

Copy link

@anuudb anuudb commented Jan 28, 2019

Thank you

@citrusui

This comment has been minimized.

Copy link
Owner Author

@citrusui citrusui 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

@erinfoleary erinfoleary commented May 9, 2019

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

@dhairyagabha

This comment has been minimized.

Copy link

@dhairyagabha dhairyagabha commented Jul 5, 2019

Trying the dropdown
This just worked.
@hedythedev

This comment has been minimized.

Copy link

@hedythedev hedythedev commented Jul 30, 2019

Oh wow
Thank you so much...
@securITymania

This comment has been minimized.

Copy link

@securITymania securITymania commented Aug 2, 2019

How I put the below code in the dropdown

$input = '<script>alert(1);</script>';
echo htmlspecialchars($input);
echo htmlentities($input);
?> ```
@TheTechRobo

This comment has been minimized.

Copy link

@TheTechRobo TheTechRobo commented Oct 27, 2019

@securITymania

<details><summary>Code</summary>

$input = '<script>alert(1);</script>';
echo htmlspecialchars($input);
echo htmlentities($input);
?>

</details>

(Notice the blank line between <details><summary>Code</summary> and $input = '<script>alert(1);</script>';, and ?> and </details>.)

Preview of it in action—

Code

$input = '<script>alert(1);</script>';`
echo htmlspecialchars($input);`
echo htmlentities($input);`
?>
Spent a good 15 mins working on this answer so please enjoy
@securITymania

This comment has been minimized.

Copy link

@securITymania securITymania commented Oct 27, 2019

@securITymania

<details><summary>Code</summary>
$input = '<script>alert(1);</script>';
echo htmlspecialchars($input);
echo htmlentities($input);
` ?>

Preview of it in action—
Code

$input = '<script>alert(1);</script>';`
echo htmlspecialchars($input);`
echo htmlentities($input);`
?>

Spent a good 15 mins working on this answer so please enjoy

thanks @TheTechRobo

@jen-ren

This comment has been minimized.

Copy link

@jen-ren jen-ren commented Nov 18, 2019

I am trying to figure out why the little triangle icon isn't showing for my own pages loaded to a web server and viewed with Firefox.

While I can load this gist page (that we are on) in Firefox and get the triangles, for my own standalone page with the same content loaded to a web server, the triangle is not there. Has anyone seen this as well?

@pkhander

This comment has been minimized.

Copy link

@pkhander pkhander commented Feb 10, 2020

How can you add links in the drop down

@javiergrabr

This comment has been minimized.

Copy link

@javiergrabr javiergrabr commented Mar 9, 2020

How do you add a picture?

@TheTechRobo

This comment has been minimized.

Copy link

@TheTechRobo TheTechRobo commented Mar 9, 2020

@AllanChain

This comment has been minimized.

Copy link

@AllanChain AllanChain commented Mar 22, 2020

Write Markdown!

Python Code

from __future__ import print_function
print('Hello world!')
Raw code
<details open>
<summary>Write Markdown!</summary>
<!--All you need is a blank line-->

**Python** *Code*
```python
from __future__ import print_function
print('Hello world!')
```
</details>

Reference: https://github.github.com/gfm/#html-block

@divakaivan

This comment has been minimized.

Copy link

@divakaivan divakaivan commented May 12, 2020

I am trying the above, but it does not work. Markdown is not being read. Is there any html tags that surround the details tag, like an html or something else?

I am writing AllanChain's code in my markdown file, but the markdown inside the details tag is not rendered.

@AllanChain

This comment has been minimized.

Copy link

@AllanChain AllanChain commented May 12, 2020

@divakaivan Some markdown renderers do not fully support gfm (GitHub Flavored Markdown)

@cfatuesta

This comment has been minimized.

Copy link

@cfatuesta cfatuesta commented May 14, 2020

How do i indent the dropdown?

@tommy-couzens

This comment has been minimized.

Copy link

@tommy-couzens tommy-couzens commented May 23, 2020

This is really cool!

Is there a way to format the text of the dropdown to make it large like a heading?

@chetanborse1999

This comment has been minimized.

Copy link

@chetanborse1999 chetanborse1999 commented May 28, 2020

That little arrow for the menu is not appearing on my page, any ideas?

@TheTechRobo

This comment has been minimized.

Copy link

@TheTechRobo TheTechRobo commented Jun 10, 2020

@AllanChain

All you need is a blank line

I feel stupid now lmao

@FPtje

This comment has been minimized.

Copy link

@FPtje FPtje commented Jul 23, 2020

Is there a way to format the text of the dropdown to make it large like a heading?


This is how you dropdown with a header:
<details><summary><h1>Is there a way to format the text of the dropdown to make it large like a heading?</h1></summary>
<br>
This is how you dropdown with a header.
</details>

This works, but it does look like the arrow is a bit out of place 🤷‍♂️

@zhouhanc

This comment has been minimized.

Copy link

@zhouhanc zhouhanc commented Aug 5, 2020

don't click
please don't...
this is the last time... nothing here. I told you :)
@rtalan2020

This comment has been minimized.

Copy link

@rtalan2020 rtalan2020 commented Sep 6, 2020

Just making some Markdown Samples Informative as well

Django is a high-level Python Web framework that encourages rapid development and clean, pragmatic design. Built by experienced developers, it takes care of much of the hassle of Web development, so you can focus on writing your app without needing to reinvent the wheel. It’s free and open source.
Django must cheat list
  • pip install django. ---> To install django
  • python -m django --version ---> Check installed Django Version
  • pip freeze ---> List all packages installed in the environment ( Check Django Version)
  • django-admin startproject rodblog ---> Create a project rodblog
  • The structure after app rodblog project creation
    			(djangoblog) λ tree /f
    			Folder PATH listing for volume Data
    			Volume serial number is AC5C-75FA
    			D:.
    			└───rodblog
    				│   manage.py
    				│
    				└───rodblog
    						asgi.py
    						settings.py
    						urls.py
    						wsgi.py
    						__init__.py
    
  • django-admin startproject rodblog ---> Create a project rodblog
  • python manage.py migrate ---> Apply all the database migrations
  • cd rodblog ---> This will be your project directory where manage.py is located
  • The structure after app creation
    		D:\django\djangoblog\rodblog
    		(djangoblog) λ tree /f
    		Folder PATH listing for volume Data
    		Volume serial number is AC5C-75FA
    		D:.
    		│   db.sqlite3
    		│   manage.py
    		│
    		├───blog
    		│   │   admin.py
    		│   │   apps.py
    		│   │   models.py
    		│   │   tests.py
    		│   │   views.py
    		│   │   __init__.py
    		│   │
    		│   └───migrations
    		│           __init__.py
    		│
    		└───rodblog
    			│   asgi.py
    			│   settings.py
    			│   urls.py
    			│   wsgi.py
    			│   __init__.py
    			│
    			└───__pycache__
    					settings.cpython-38.pyc
    					urls.cpython-38.pyc
    					wsgi.cpython-38.pyc
    					__init__.cpython-38.pyc
    
  • python manage.py startapp blog ---> Create an app blog
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.