Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
collapsible markdown

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

@spottedmahn

This comment has been minimized.

Copy link

@spottedmahn spottedmahn commented Jan 15, 2018

Nice, thanks!

@davidstults

This comment has been minimized.

Copy link

@davidstults davidstults commented Feb 8, 2018

This is awesome, thanks! Just what I was looking for.

@joniba

This comment has been minimized.

Copy link

@joniba joniba commented Mar 22, 2018

πŸ‘

@davidbreitgand

This comment has been minimized.

Copy link

@davidbreitgand davidbreitgand commented Apr 8, 2018

Absolutely awesome!

@noparade

This comment has been minimized.

Copy link

@noparade noparade commented Apr 10, 2018

Nice. Thanks!

@OliverEvans96

This comment has been minimized.

Copy link

@OliverEvans96 OliverEvans96 commented Apr 18, 2018

πŸ‘

@gangadharjannu

This comment has been minimized.

Copy link

@gangadharjannu gangadharjannu commented Apr 18, 2018

Cool! Thanks for sharing

@3-24

This comment has been minimized.

Copy link

@3-24 3-24 commented Apr 25, 2018

πŸ‘

@sheikirfanbasha

This comment has been minimized.

Copy link

@sheikirfanbasha sheikirfanbasha commented May 17, 2018

Thank you! πŸ‘

@wouldBeNerd

This comment has been minimized.

Copy link

@wouldBeNerd wouldBeNerd commented May 21, 2018

Thanks! πŸ‘

@AlAskalany

This comment has been minimized.

Copy link

@AlAskalany AlAskalany commented May 29, 2018

Thanks!

@libreoscar

This comment has been minimized.

Copy link

@libreoscar libreoscar commented May 31, 2018

Really cool!

@sthuber90

This comment has been minimized.

Copy link

@sthuber90 sthuber90 commented Jun 8, 2018

Thank you for sharing πŸ‘

@robstoll

This comment has been minimized.

Copy link

@robstoll robstoll commented Jun 12, 2018

I was looking for this quite some time and google never brought me here before πŸ‘

@jhollowed

This comment has been minimized.

Copy link

@jhollowed jhollowed commented Jun 15, 2018

Awesome, thanks. It seem that text formatting, like emphasis, doesn't work within the <summary>?

@E-Ruhl

This comment has been minimized.

Copy link

@E-Ruhl E-Ruhl commented Jun 17, 2018

Like this? Useful Source

It's because the details block is html5. If you want to modify it your best bet is using html5.

<details>
<summary>
<i>Like this? </i>
<a href="http://www.ironspider.ca/format_text/fontstyles.htm">
Useful Source</a>
</summary>
<p>It's because the details block is html5. If you want to modify it your best bet is using html5. </p>
</details>

That also shows you how to embed a hyperlink in your drop down. The emphases can also be used on the displayed text of the hyper link.

@humada05

This comment has been minimized.

Copy link

@humada05 humada05 commented Jun 27, 2018

good stuff man

@DollarAkshay

This comment has been minimized.

Copy link

@DollarAkshay DollarAkshay commented Jul 5, 2018

πŸ‘

@tanner00

This comment has been minimized.

Copy link

@tanner00 tanner00 commented Jul 12, 2018

Great! Thank you!

@ivan006

This comment has been minimized.

Copy link

@ivan006 ivan006 commented Aug 13, 2018

the the section title isnt formattable ...

collapsible markdown?

# CLICK ME

yes, even hidden code blocks!

print("hello world!")

@ivan006

This comment has been minimized.

Copy link

@ivan006 ivan006 commented Aug 13, 2018

never mind

## collapsible markdown?

<details>
<summary>

# CLICK ME
</summary>
<p>

#### yes, even hidden code blocks!

```python
print("hello world!")

```

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

@Ioan-Popovici

This comment has been minimized.

Copy link

@Ioan-Popovici Ioan-Popovici commented Aug 24, 2018

Collapsible section does not auto expand when accessing a header anchor inside the collapsible section

@fffx

This comment has been minimized.

Copy link

@fffx fffx commented Aug 26, 2018

How can I add content before 'CLICK ME' in the same line?

Exmaple: I wana the arrow after click me

CLICK ME >
@mdebarros

This comment has been minimized.

Copy link

@mdebarros mdebarros commented Aug 31, 2018

Most useful Github repo ever!!!

@jtr109

This comment has been minimized.

Copy link

@jtr109 jtr109 commented Sep 1, 2018

Perfect! Thanks a lot!

have a try

Look at what I hide!

@Cidaas

This comment has been minimized.

Copy link

@Cidaas Cidaas commented Sep 10, 2018

Like this? Useful Source

It's because the details block is html5. If you want to modify it your best bet is using html5.

@kchatlosh

This comment has been minimized.

Copy link

@kchatlosh kchatlosh commented Sep 19, 2018

this is awesome, thanks!
also, this may be a long shot but is there a way that you could add info that is collapsable in a .md file, and then omit that info when using pandoc to convert the .md file to a .docx or .pdf file? i'm trying to see if i could add in notes to myself below each citation in a bibliography written in markdown, but then still export the bibliography as a clean list in .docx or .pdf without the notes

@Fi1osof

This comment has been minimized.

Copy link

@Fi1osof Fi1osof commented Oct 4, 2018

Thanks!

@thejhh

This comment has been minimized.

Copy link

@thejhh thejhh commented Oct 4, 2018

Nice, but does not work on Github Pages. (The markdown inside the HTML does not get rendered.)

@tischi

This comment has been minimized.

Copy link

@tischi tischi commented Oct 10, 2018

awesome! Thanks!

@srea

This comment has been minimized.

Copy link

@srea srea commented Oct 11, 2018

πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘ πŸ‘

@jsaintvanne

This comment has been minimized.

Copy link

@jsaintvanne jsaintvanne commented Oct 16, 2018

Is there a limit of hidden section ?
Say it cause I would like to hide something collapsible and it isn't take part of my details section, just have an empty thing...
I work with Atom, and its preview. Maybe the problem comes from here and that should be repair on Github when I will push it ?

Edit : I just verify and it looks that's Atom that doesn't support all things about collapsible section. That works well when I push it on Github !

@ShannonChenCHN

This comment has been minimized.

Copy link

@ShannonChenCHN ShannonChenCHN commented Nov 9, 2018

Awesome! Unfortunately,it doesn't work on GitLab.

@greymonroe

This comment has been minimized.

Copy link

@greymonroe greymonroe commented Dec 1, 2018

Nice, but does not work on Github Pages. (The markdown inside the HTML does not get rendered.)

possible solution: https://github.community/t5/GitHub-Pages/Collapsible-markdown-inside-lt-details-gt-lt-summary-gt-lt/td-p/13786

@sdaponte

This comment has been minimized.

Copy link

@sdaponte sdaponte commented Dec 8, 2018

'CLICK ME' in the same line?

You could solve this with CSS, something like:
summary h2, summary h3{ display: inline-block; }

@sandboiii

This comment has been minimized.

Copy link

@sandboiii sandboiii commented Dec 30, 2018

Thank you, dude!

@mara-dolan

This comment has been minimized.

Copy link

@mara-dolan mara-dolan commented Jan 3, 2019

anyone know of a way to link to a collapsed line?

@georgeef

This comment has been minimized.

Copy link

@georgeef georgeef commented Jan 13, 2019

the detail construct is plain html, it is not markdown. is there any effort to add a detail feature into markdown spec with some simple syntax?

in vim i often use the following structure:

{{{ - section header
introductory text

{{{ + subsection 1
  subsection 1 test
  possible sub-subsections
}}}
{{{ - subsection 2
  subsection 2 text
}}}
}}}

the {{{ ... }}} construct in vim appears as a fold (single line) which can be expanded. the +- signs are not important for vim (they mean done/todo for me). it would be nice if i could use a markdown syntax like the above for collapsible sections. ideally i would like to have a single file which serves both collapsible folds in vim and collapsible sections in markdown.

in vim i can easily close an open fold when the cursor is inside the fold text, which is convenient when the fold is large and the header line is out of the screen. in html it seems that i cannot collapse a detail by clicking inside it, i need to scroll up to its summary line.

@wgtgithub

This comment has been minimized.

Copy link

@wgtgithub wgtgithub commented Feb 15, 2019

Not work on Backlog wiki.
Somebody knows the way to complete?

@sparkleholic

This comment has been minimized.

Copy link

@sparkleholic sparkleholic commented Mar 20, 2019

πŸ‘ Thanks!

@jakubjo

This comment has been minimized.

Copy link

@jakubjo jakubjo commented Mar 25, 2019

πŸ‘ Thank you!

@gokhansolak

This comment has been minimized.

Copy link

@gokhansolak gokhansolak commented Apr 12, 2019

Thank you :)

Markdown between html tags works when there's an empty line before it. here ```it doesn't work```

here it works

source:

 <details><summary>
  Markdown between html tags works when there's an empty line before it.
  </summary>
  here ```it doesn't work```

  here ```it works```

  </details>
@tan-yue

This comment has been minimized.

Copy link

@tan-yue tan-yue commented Apr 18, 2019

This is just awesome! Thank you :)

@AnClark

This comment has been minimized.

Copy link

@AnClark AnClark commented Apr 25, 2019

Thanks a lot! It's very useful when I need to tidy up my markdown.

@shgtkshruch

This comment has been minimized.

Copy link

@shgtkshruch shgtkshruch commented May 16, 2019

πŸ‘

@YouRNotPaulChan

This comment has been minimized.

Copy link

@YouRNotPaulChan YouRNotPaulChan commented May 24, 2019

Thank! But it could not toggle a table in markdown,how can i toggle a table in the markdown

@scripnichenko

This comment has been minimized.

Copy link

@scripnichenko scripnichenko commented Jun 5, 2019

thanks! πŸ₯‡

@ghosalya

This comment has been minimized.

Copy link

@ghosalya ghosalya commented Jun 24, 2019

thanks!

@Dan-Smith-Suredbits

This comment has been minimized.

Copy link

@Dan-Smith-Suredbits Dan-Smith-Suredbits commented Jun 24, 2019

Has anyone had problems with this causing markdown tables to break? Any fixes? It gronks the format for a table Id like to have under the collapsible menu.

Thanks in advance

@asamoon

This comment has been minimized.

Copy link

@asamoon asamoon commented Jun 26, 2019

thanks!!

@rithinskaria

This comment has been minimized.

Copy link

@rithinskaria rithinskaria commented Jul 1, 2019

This is wonderful! But is there a way we can add an "Expand All" button and clicking on it would expand all of the collapsible content?

Thanks in advance :)

@emmanuelnk

This comment has been minimized.

Copy link

@emmanuelnk emmanuelnk commented Jul 19, 2019

Doesn't seem to work with tables?
[UPDATE]. its does work with tables, just needs a spaces

click to expand
key value
x-api-token XA/Xxa/FAASDASDxxxxXXXXXXX/xxxxxxxxxx=
x-user-lang en_US
Content-Type application/json
@yyh-gl

This comment has been minimized.

Copy link

@yyh-gl yyh-gl commented Jul 30, 2019

πŸ‘

@kangwonlee

This comment has been minimized.

Copy link

@kangwonlee kangwonlee commented Jul 31, 2019

Thx πŸ‘

@u2

This comment has been minimized.

Copy link

@u2 u2 commented Sep 6, 2019

CLICK ME
@zavr-1

This comment has been minimized.

Copy link

@zavr-1 zavr-1 commented Sep 12, 2019

For example, given the following source:
import { constants } from 'os'
import { createWriteStream, createReadStream } from 'fs'

// ... click to expand/collapse
;(async () => {
  const result = await new Promise((r, j) => {
    const input = process.env['INPUT'] || __filename
    const output = process.env['OUTPUT']
    const rs = createReadStream(input)
    const ws = output ? createWriteStream(output) : process.stdout
    rs.pipe(ws)
    rs.on('error', (err) => {
      if (err.errno === -constants.errno.ENOENT) {
        return j(`Cannot find file ${input}`)
      }
      return j(err)
    })
    rs.on('close', () => {
      r({ input, 'output': output })
    })
  })
  const res = {
    version: process.version,
    ...result,
  }
  console.log(res)
})()
@BHydden

This comment has been minimized.

Copy link

@BHydden BHydden commented Sep 17, 2019

Legend! thanks a bunch <3

@krowter

This comment has been minimized.

Copy link

@krowter krowter commented Sep 25, 2019

Thanks! Exactly what I was looking for

@sl1pkn07

This comment has been minimized.

Copy link

@sl1pkn07 sl1pkn07 commented Sep 30, 2019

can hide images?

greetings

@krowter

This comment has been minimized.

Copy link

@krowter krowter commented Sep 30, 2019

can hide images?

greetings

@sl1pkn07 Yes. Make sure the image is on the same identation level (if any) as the <details>

@sl1pkn07

This comment has been minimized.

Copy link

@sl1pkn07 sl1pkn07 commented Sep 30, 2019

you mean this?

<details>
![IMG_20190930_161629](https://user-images.githubusercontent.com/462213/65887262-f1f13c00-e39d-11e9-9846-1019b8f4d3bb.jpg)
</details>

this show the words instead of the pic

luc-github/ESP3D#372 (comment)

@krowter

This comment has been minimized.

Copy link

@krowter krowter commented Sep 30, 2019

Have you tried using local image? It's working in my case
Screenshot from 2019-09-30 22-04-18

@sl1pkn07

This comment has been minimized.

Copy link

@sl1pkn07 sl1pkn07 commented Sep 30, 2019

nope, because i want to use in github bug reports

greetings

EDIT: dear-github/dear-github#166 (comment) sems to be works, i need another try)
EDIT2: now works. needs new blank line between <details> and ![pic]() and the ![pic]() and the </details>, like

<details>

![IMG_20190930_161629](https://user-images.githubusercontent.com/462213/65887262-f1f13c00-e39d-11e9-9846-1019b8f4d3bb.jpg)

</details>

sorry for the noise

EDIT3: oh , you example...

greetings

@JnBrymn

This comment has been minimized.

Copy link

@JnBrymn JnBrymn commented Sep 30, 2019

Wow... just happened to notice that this works in Jupyter notebooks as well!

@jjjjoshuamamawag

This comment has been minimized.

Copy link

@jjjjoshuamamawag jjjjoshuamamawag commented Oct 7, 2019

For example, given the following source:

import { constants } from 'os'
import { createWriteStream, createReadStream } from 'fs'

// ... click to expand/collapse

Care to share how you did this?

@ImminentFate

This comment has been minimized.

Copy link

@ImminentFate ImminentFate commented Oct 13, 2019

Care to share how you did this?

@henryking123 since they haven't replied, I made a gist showing how it's done

Click to see more:
Given the following python code
from pychartjs import BaseChart

class myChart(BaseChart):
    pass
chartJSON = myChart().get()

Write the following HTML
<div class="container">
   <canvas id="myChart"></canvas>
</div>
... and JS
var data = {{ chartJSON | safe }}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, data);

Alternative Style

Click to see more:
Given the following python code
from pychartjs import BaseChart

class myChart(BaseChart):
    pass
chartJSON = myChart().get()

Write the following HTML
<div class="container">
   <canvas id="myChart"></canvas>
</div>
... and JS
var data = {{ chartJSON | safe }}
var ctx = document.getElementById("myChart").getContext('2d');
var myChart = new Chart(ctx, data);
@dideler

This comment has been minimized.

Copy link

@dideler dideler commented Nov 14, 2019

Be cautious when using collapsible markdown, it can make content a lot less accessible.
AFAIK there is no way to link to a collapsed section and have the collapsed content be auto-expanded.

@pdslly

This comment has been minimized.

Copy link

@pdslly pdslly commented Dec 10, 2019

this is
is
is
is
very
good!
@WONILLISM

This comment has been minimized.

Copy link

@WONILLISM WONILLISM commented Dec 25, 2019

very good!! Thanks.

@aleksas

This comment has been minimized.

Copy link

@aleksas aleksas commented Dec 31, 2019

Thanks, just what I needed!

@thevillagehacker

This comment has been minimized.

Copy link

@thevillagehacker thevillagehacker commented Jan 6, 2020

how to do this β–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆβ–ˆ in markdown can anyone help me with this?

@zhou3q

This comment has been minimized.

Copy link

@zhou3q zhou3q commented Jan 12, 2020

Awesome!!!

@niceguysforhelp

This comment has been minimized.

Copy link

@niceguysforhelp niceguysforhelp commented Feb 4, 2020

hey guys can someone help me pls i need to have two detaills inside eachothers in and each one in a new level heading somehow like that

Heading1 ##
Heading1.1#

pls could you correct it i dont get the needed result

@d-m-bailey

This comment has been minimized.

Copy link

@d-m-bailey d-m-bailey commented Feb 19, 2020

Heading1

some text

  • Heading1.1

    some more text

    • Heading1.1.1 even more text
<details>
<summary>Heading1</summary>

some text
+ <details>
    <summary>Heading1.1</summary>

    some more text
    + <details>
        <summary>Heading1.1.1</summary>
        even more text
      </details>
   </details>
</details>

Looks like you might need to add styles to each detail level to imitate h1, h2, etc.
Blank lines and spacing are necessary for indentation and bullets.
Remove the '+' and leading spaces to get rid of the indentation and bullets.

Heading1 some text
Heading1.1 some more text
Heading1.1.1 even more text
<details>
<summary>Heading1</summary>
some text
<details>
<summary>Heading1.1</summary>
some more text
<details>
<summary>Heading1.1.1</summary>
 even more text
</details>
</details>
</details>
@JoshMayberry

This comment has been minimized.

Copy link

@JoshMayberry JoshMayberry commented Mar 3, 2020

Very nice!

@chadlavi

This comment has been minimized.

Copy link

@chadlavi chadlavi commented Mar 5, 2020

This is just embedded html in a markdown file, it's always worked

@Tafkas

This comment has been minimized.

Copy link

@Tafkas Tafkas commented Mar 5, 2020

πŸ‘

@chrisnager

This comment has been minimized.

Copy link

@chrisnager chrisnager commented Mar 5, 2020

πŸ™Œ

@ydnar

This comment has been minimized.

Copy link

@ydnar ydnar commented Mar 5, 2020

Like this?

@vorpus

This comment has been minimized.

Copy link

@vorpus vorpus commented Mar 5, 2020

how to triforce β–²

β–² β–²

@lucperkins

This comment has been minimized.

Copy link

@lucperkins lucperkins commented Mar 5, 2020

Wish this were in GitHub-flavored Markdown SIGH

@RUSshy

This comment has been minimized.

Copy link

@RUSshy RUSshy commented Mar 5, 2020

why they mix unrelated HTML syntax with MD?

this is what happen when you hire bloated driven developpers..

we life in a retarded and sad world where retarded people are paid a lot to do trash bullshit stuff

@jdanylko

This comment has been minimized.

Copy link

@jdanylko jdanylko commented Mar 5, 2020

Very Kewl!

@Axfan

This comment has been minimized.

Copy link

@Axfan Axfan commented Mar 5, 2020

This is awesome, thanks!

@batisteo

This comment has been minimized.

Copy link

@batisteo batisteo commented Mar 23, 2020

I was afraid it would be Github only, but hopefully it’s just HTML!
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details

@yukitakahashi1

This comment has been minimized.

Copy link

@yukitakahashi1 yukitakahashi1 commented Apr 7, 2020

Can we include the collapsible inside a text?

Before click:

This is my text. Click here:

After click:

This is my text. Click here: Hi, this is my collapsible, not separated from the text.
@nanxiaobei

This comment has been minimized.

Copy link

@nanxiaobei nanxiaobei commented Apr 24, 2020

have a try

Look at what I hide!
@nanxiaobei

This comment has been minimized.

Copy link

@nanxiaobei nanxiaobei commented Apr 24, 2020

how to open?

β–²
@hvd10

This comment has been minimized.

Copy link

@hvd10 hvd10 commented May 3, 2020

joyrexus

Thanks πŸ‘

@IyarLin

This comment has been minimized.

Copy link

@IyarLin IyarLin commented May 26, 2020

Thank you so much! You've just made github_document so much more useful for me!

@Bowenislandsong

This comment has been minimized.

Copy link

@Bowenislandsong Bowenislandsong commented Jul 14, 2020

i wanna try this

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

@Bowenislandsong

This comment has been minimized.

Copy link

@Bowenislandsong Bowenislandsong commented Jul 14, 2020

neat

@jeemok

This comment has been minimized.

Copy link

@jeemok jeemok commented Aug 19, 2020

Perfect!

@AsifMohamed

This comment has been minimized.

Copy link

@AsifMohamed AsifMohamed commented Sep 6, 2020

SOMEONE HELP

Its working here how to use this code in my HTML can someone help me

@iterating

This comment has been minimized.

Copy link

@iterating iterating commented Sep 21, 2020

[UPDATE]. its does work with tables, just needs a spaces

How do you make it work? | All | I'm | Getting | | --- | --- | --- | | is | this | :( |
Update: I figured it out, here's how to do it

Put a newline after the </summary>

like this
Yay it works
@umarcbs

This comment has been minimized.

Copy link

@umarcbs umarcbs commented Sep 21, 2020

Asteraceae:
Allium Cepa

It is also called as ONION.

Ethno-Medicinal Uses Here are the uses of Onion
Map even more text
@xihajun

This comment has been minimized.

Copy link

@xihajun xihajun commented Sep 22, 2020

I want to say

thanks!

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.