Collapsible header in Markdown to html

Question

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

Answer 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)
        }
    }