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

commented Jan 15, 2018

Nice, thanks!

@davidstults

This comment has been minimized.

Copy link

commented Feb 8, 2018

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

@joniba

This comment has been minimized.

Copy link

commented Mar 22, 2018

πŸ‘

@davidbreitgand

This comment has been minimized.

Copy link

commented Apr 8, 2018

Absolutely awesome!

@noparade

This comment has been minimized.

Copy link

commented Apr 10, 2018

Nice. Thanks!

@OliverEvans96

This comment has been minimized.

Copy link

commented Apr 18, 2018

πŸ‘

@gangadharjannu

This comment has been minimized.

Copy link

commented Apr 18, 2018

Cool! Thanks for sharing

@3-24

This comment has been minimized.

Copy link

commented Apr 25, 2018

πŸ‘

@sheikirfanbasha

This comment has been minimized.

Copy link

commented May 17, 2018

Thank you! πŸ‘

@wouldBeNerd

This comment has been minimized.

Copy link

commented May 21, 2018

Thanks! πŸ‘

@AlAskalany

This comment has been minimized.

Copy link

commented May 29, 2018

Thanks!

@libreoscar

This comment has been minimized.

Copy link

commented May 31, 2018

Really cool!

@sthuber90

This comment has been minimized.

Copy link

commented Jun 8, 2018

Thank you for sharing πŸ‘

@robstoll

This comment has been minimized.

Copy link

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

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

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

commented Jun 27, 2018

good stuff man

@DollarAkshay

This comment has been minimized.

Copy link

commented Jul 5, 2018

πŸ‘

@tanner00

This comment has been minimized.

Copy link

commented Jul 12, 2018

Great! Thank you!

@ivan006

This comment has been minimized.

Copy link

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

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

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

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

commented Aug 31, 2018

Most useful Github repo ever!!!

@jtr109

This comment has been minimized.

Copy link

commented Sep 1, 2018

Perfect! Thanks a lot!

have a try

Look at what I hide!

@Cidaas

This comment has been minimized.

Copy link

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

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

commented Oct 4, 2018

Thanks!

@thejhh

This comment has been minimized.

Copy link

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

commented Oct 10, 2018

awesome! Thanks!

@srea

This comment has been minimized.

Copy link

commented Oct 11, 2018

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

@jsaintvanne

This comment has been minimized.

Copy link

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

commented Nov 9, 2018

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

@greymonroe

This comment has been minimized.

Copy link

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

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

commented Dec 30, 2018

Thank you, dude!

@mara-dolan

This comment has been minimized.

Copy link

commented Jan 3, 2019

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

@georgeef

This comment has been minimized.

Copy link

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

commented Feb 15, 2019

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

@sparkleholic

This comment has been minimized.

Copy link

commented Mar 20, 2019

πŸ‘ Thanks!

@jakubjo

This comment has been minimized.

Copy link

commented Mar 25, 2019

πŸ‘ Thank you!

@gokhansolak

This comment has been minimized.

Copy link

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

commented Apr 18, 2019

This is just awesome! Thank you :)

@AnClark

This comment has been minimized.

Copy link

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

commented May 16, 2019

πŸ‘

@YouRNotPaulChan

This comment has been minimized.

Copy link

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

commented Jun 5, 2019

thanks! πŸ₯‡

@ghosalya

This comment has been minimized.

Copy link

commented Jun 24, 2019

thanks!

@Dan-Smith-Suredbits

This comment has been minimized.

Copy link

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

commented Jun 26, 2019

thanks!!

@rithinskaria

This comment has been minimized.

Copy link

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 :)

@gusdnd852

This comment has been minimized.

Copy link

commented Jul 14, 2019

collapsible markdown?

CLICK ME

yes, even hidden code blocks!

print("hello world!")

@emmanuelnk

This comment has been minimized.

Copy link

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

commented Jul 30, 2019

πŸ‘

@kangwonlee

This comment has been minimized.

Copy link

commented Jul 31, 2019

Thx πŸ‘

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.