Docsify: [feature request] sidebar item add collapse and expand

[Wsine]

Appreciate for the work of this project.

I know it seems rule to ask for such feature and maybe it is "impossible" to implement. But, how if user provides directories structure in _sidebar.md file.

for example _sidebar.md

- FolderName
  - [Article1](/FolderName/Article1.md)
  - [Article2](/FolderName/Article2.md)
- FolderName2
  - [Article3](/FolderName2/Article3.md)
  - [Article4](/FolderName2/Article4.md)

The original demand comes from that i want to construct my personal blog with doscify. However, the sidebar is as long as my article amount.

I found that i can write a bash script to help me scan my folders and then generate a sidebar file. such as
find . -mindepth 2 -name "*.md" | awk -F'/' 'BEGIN {RS=".md"} {arr[$2]=arr[$2]"\n - ["$3"](/"$2"/"$3")"} END {for (key in arr) print "- "key, arr[key]}' > _sidebar.md
what's more, travis ci can help us do such a job.

so, can docsify add a toggle feature for no hyperlink item in the sidebar? it is ok for adding it into configurable options.

[Wsine]

I wrote a small solution this afternoon, although it may waste more calculation resource.

window.$docsify = {
  plugins: [
    function(hook, vm) {
      hook.doneEach(function() {
        document.querySelectorAll(".sidebar-nav > ul > li").forEach(
          function(node, index, nodelist) {
            var span = document.createElement("span");
            span.innerHTML = node.firstChild.data;
            span.style.cursor = "pointer";
            span.onclick = function(event) {
              var ul = event.target.nextElementSibling;
              if (ul.style.display === "none") {
                ul.style.display = "block";
              } else {
                ul.style.display = "none";
              }
            };
            node.firstChild.replaceWith(span);
            node.lastChild.style.display = "none";
        });
        var active = document.querySelector(".sidebar-nav li.active");
        if (active) {
          active.parentElement.style.display = "block";
        }
      });
    }
  ]
}

there is also a live demo. => https://wsine.github.io/blog

[w1024k]

当一章只有一级的时候,这章就不显示了

[kinm]

当一章只有一级的时候,这章就不显示了

+1

[anikethsaha]

I wrote a small solution this afternoon, although it may waste more calculation resource.

window.$docsify = {
  plugins: [
    function(hook, vm) {
      hook.doneEach(function() {
        document.querySelectorAll(".sidebar-nav > ul > li").forEach(
          function(node, index, nodelist) {
            var span = document.createElement("span");
            span.innerHTML = node.firstChild.data;
            span.style.cursor = "pointer";
            span.onclick = function(event) {
              var ul = event.target.nextElementSibling;
              if (ul.style.display === "none") {
                ul.style.display = "block";
              } else {
                ul.style.display = "none";
              }
            };
            node.firstChild.replaceWith(span);
            node.lastChild.style.display = "none";
        });
        var active = document.querySelector(".sidebar-nav li.active");
        if (active) {
          active.parentElement.style.display = "block";
        }
      });
    }
  ]
}

there is also a live demo. => https://wsine.github.io/blog

@Wsine Can you refactor this a bit as per your choice and submit a PR to add this plugin in the docs.
Publish this as a plugin and submit it in the docs

[Wsine]

@anikethsaha Well, it seems that current version did not satisfy all the demands on collapsable sidebar. I will try my best when I have time.

[anikethsaha]

Sure👍

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[vagra]

very good!

view my site: https://kepan.org/docsify

i have many heading levels (up to 108), i want the sidebar items can be expand & collapse.

like Typora's side bar, that's very good! it can expand, collapse, and sync scroll.