Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Collapsible header in Markdown to html

Our internal git-lab wiki works with Markdown. I made several summaries of articles and want to post them in our wiki, in such a way that if I click on the header, it should unfold and the text should become visible, basically like in this example

Does Markdown have this expand/collapse/fold function?

like image 377
Sasha-Li Avatar asked Jul 22 '15 12:07

Sasha-Li


People also ask

Does Markdown support collapsible sections?

Short Answer: No, Markdown does not offer a feature like that directly, but with some work you might be able to build something that works. For a feature like that to work you would need some CSS and/or JavaScript to control the animations, etc.

How do you make collapsible content in HTML?

To make an animated collapsible, add max-height: 0 , overflow: hidden and a transition for the max-height property, to the panel class.

Can Markdown have HTML?

Span-level HTML tags — e.g. <span> , <cite> , or <del> — can be used anywhere in a Markdown paragraph, list item, or header. If you want, you can even use HTML tags instead of Markdown formatting; e.g. if you'd prefer to use HTML <a> or <img> tags instead of Markdown's link or image syntax, go right ahead.


1 Answers

Try:

<details>   <summary>Your header here! (Click to expand)</summary>   Your content here...   > markup like blockquote's should even work on github!   more content here... </details> 

You can try this sort of thing here:

    <details>        <summary>Your header here! (Click to expand)</summary>        Your content here...</br>        (markup only where supported)</br>        more content here...</br>      </details>

This works for me with Chrome, but may not work yet for other browsers. There are some related posts at github.

like image 75
Touby Avatar answered Oct 06 '22 01:10

Touby