35

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?

sk22
  • 707
  • 1
  • 7
  • 18
Sasha-Li
  • 353
  • 1
  • 3
  • 4

3 Answers3

67

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.

Touby
  • 671
  • 5
  • 2
  • 3
    Works for me on Chrome and iOS Safari, but not Firefox or IE. Good enough for me, really. – DavidS Nov 17 '16 at 01:10
8

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. While you might be able to get such a feature to work on any HTML, it is not particularly easy on Markdown output.

Ideally, each collapsible section would be wrapped in a div:

<div id="section1">
  <h1>Section 1</h1>
  <p>Section 1 content</p>
  <div id="section1-1">
    <h2>Section1-1</h2>
    <p>section 1-1 content</p>
  </div>
    <div id="section1-2">
    <h2>Section1-2</h2>
    <p>section 1-2 content</p>
  </div>
</div>

Then you can use some CSS/JavaScript to collapse the individual sections. However, Markdown does not have a concept of sections. Instead of the above, Markdown would give you this flat document:

<h1>Section 1</h1>
<p>Section 1 content</p>
<h2>Section1-1</h2>
<p>section 1-1 content</p>
<h2>Section1-2</h2>
<p>section 1-2 content</p>

A solution would require looping through the entire document, breaking it up into the various sections and wrapping each section in divs. You can find a couple examples of that as Extensions to the Python-Markdown Parser. However, with any information regarding the environment you are working in, It is a little more difficult to point you in the correct direction. Besides, Stackoverflow is not supposed to be a tool recommendation site. However, by observing how others have solved the problem (in the examples I pointed to) you should be able to work out a similar solution.

Once you get the sections properly wrapped, then a little JavaScript to fold/collapse the individual sections will take care of the rest. However, that is a separate issue which has been asked and answered many times here. See some of the "Related" questions listed on the sidebar for solutions to that part of the problem.

It is even possible that some JavaScript libraries exist which will take the plain HTML content, do the section wrapping and implement the fold/collapse feature all in one. However, such a library may be a little heavy and slow down your site, so proceed with cation.

Waylan
  • 25,184
  • 8
  • 62
  • 93
  • Great, thanks for your answer! Usually I use R to write markdown files, and then I simply upload the .md file to the git-lab repository. But in this case, when I make posts in the wiki, I simply work within the browser and save the page. – Sasha-Li Jul 22 '15 at 13:57
  • Wondering if now, 4.5 years later there might be a simple way to convert all headers to folding parts in html? :) – puslet88 Jan 24 '20 at 17:42
1

There exsists a github repo does what you want: szhielelp/md-post-header-collapse.

A jquery tool to make header collapsible in markdown post

https://szhshp.org/tech/2016/08/23/jekyllmdpostcollapse.html is the document and you can have a look at what that plugin does.

The base idea is to reverse all the header's children element show/hide state every time you click a header.

    let collapse = function (headerElem) {

        let isShow = headerElem.hasClass('headerCollapsed') ? true : false;
        if (isShow) {
            // collapsed
            headerElem.removeClass('headerCollapsed');
        } else {
            headerElem.addClass('headerCollapsed');
        }

        /* collapse all header's children */
        headerCollapse(headerElem, headerElem.next(), isShow);
    }

    let headerCollapse = function (headerElem, currentElem, isShow) {
            /* I remove the end condition  */
            if (isShow) {
                currentElem.show(400);

                /* reset status */
                currentElem.removeClass('headerCollapsed')
            } else {
                currentElem.hide(400);
            }

            headerCollapse(headerElem, currentElem.next(), isShow)
        }
    }
Ynjxsjmh
  • 7,277
  • 2
  • 8
  • 31