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 commented Jan 15, 2018

Nice, thanks!

@davidstults

This comment has been minimized.

Copy link

davidstults commented Feb 8, 2018

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

@joniba

This comment has been minimized.

Copy link

joniba commented Mar 22, 2018

πŸ‘

@davidbreitgand

This comment has been minimized.

Copy link

davidbreitgand commented Apr 8, 2018

Absolutely awesome!

@noparade

This comment has been minimized.

Copy link

noparade commented Apr 10, 2018

Nice. Thanks!

@OliverEvans96

This comment has been minimized.

Copy link

OliverEvans96 commented Apr 18, 2018

πŸ‘

@gangadharjannu

This comment has been minimized.

Copy link

gangadharjannu commented Apr 18, 2018

Cool! Thanks for sharing

@3-24

This comment has been minimized.

Copy link

3-24 commented Apr 25, 2018

πŸ‘

@sheikirfanbasha

This comment has been minimized.

Copy link

sheikirfanbasha commented May 17, 2018

Thank you! πŸ‘

@wouldBeNerd

This comment has been minimized.

Copy link

wouldBeNerd commented May 21, 2018

Thanks! πŸ‘

@AlAskalany

This comment has been minimized.

Copy link

AlAskalany commented May 29, 2018

Thanks!

@libreoscar

This comment has been minimized.

Copy link

libreoscar commented May 31, 2018

Really cool!

@sthuber90

This comment has been minimized.

Copy link

sthuber90 commented Jun 8, 2018

Thank you for sharing πŸ‘

@robstoll

This comment has been minimized.

Copy link

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 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 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 commented Jun 27, 2018

good stuff man

@DollarAkshay

This comment has been minimized.

Copy link

DollarAkshay commented Jul 5, 2018

πŸ‘

@tanner00

This comment has been minimized.

Copy link

tanner00 commented Jul 12, 2018

Great! Thank you!

@ivan006

This comment has been minimized.

Copy link

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 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 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 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 commented Aug 31, 2018

Most useful Github repo ever!!!

@jtr109

This comment has been minimized.

Copy link

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 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 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 commented Oct 4, 2018

Thanks!

@thejhh

This comment has been minimized.

Copy link

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 commented Oct 10, 2018

awesome! Thanks!

@srea

This comment has been minimized.

Copy link

srea commented Oct 11, 2018

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

@jsaintvanne

This comment has been minimized.

Copy link

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 commented Nov 9, 2018

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

@greymonroe

This comment has been minimized.

Copy link

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 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; }

@Sandmonster

This comment has been minimized.

Copy link

Sandmonster commented Dec 30, 2018

Thank you, dude!

@mara-dolan

This comment has been minimized.

Copy link

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 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 commented Feb 15, 2019

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

@sparkleholic

This comment has been minimized.

Copy link

sparkleholic commented Mar 20, 2019

πŸ‘ Thanks!

@jakubjo

This comment has been minimized.

Copy link

jakubjo commented Mar 25, 2019

πŸ‘ Thank you!

@gokhansolak

This comment has been minimized.

Copy link

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 commented Apr 18, 2019

This is just awesome! Thank you :)

@AnClark

This comment has been minimized.

Copy link

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 commented May 16, 2019

πŸ‘

@YouRNotPaulChan

This comment has been minimized.

Copy link

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 commented Jun 5, 2019

thanks! πŸ₯‡

@ghosalya

This comment has been minimized.

Copy link

ghosalya commented Jun 24, 2019

thanks!

@Dan-Smith-Suredbits

This comment has been minimized.

Copy link

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 commented Jun 26, 2019

thanks!!

@rithinskaria

This comment has been minimized.

Copy link

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 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 commented Jul 30, 2019

πŸ‘

@kangwonlee

This comment has been minimized.

Copy link

kangwonlee commented Jul 31, 2019

Thx πŸ‘

@u2

This comment has been minimized.

Copy link

u2 commented Sep 6, 2019

CLICK ME
@zavr-1

This comment has been minimized.

Copy link

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 commented Sep 17, 2019

Legend! thanks a bunch <3

@krowter

This comment has been minimized.

Copy link

krowter commented Sep 25, 2019

Thanks! Exactly what I was looking for

@sl1pkn07

This comment has been minimized.

Copy link

sl1pkn07 commented Sep 30, 2019

can hide images?

greetings

@krowter

This comment has been minimized.

Copy link

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 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 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 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 commented Sep 30, 2019

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

@henryking123

This comment has been minimized.

Copy link

henryking123 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 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 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.

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.