1

I have a SUMMARY.md file for rendering the Docsify sidebar:

* [SW-Module](module/README.md)

  * [AGB](module/agb.md)
  * [Style guide](module/styles.md)
  * [Start](module/start.md)

And my Docsify configuration is done like this in index.html:

window.$docsify = {
  alias: {
    '/.*/SUMMARY.md': 'SUMMARY.md'
  },
  name: 'Name',
  repo: 'https://github.com/org/repo',
  loadSidebar: 'SUMMARY.md',
  basePath: "./",
  maxLevel: 2,
  subMaxLevel: 1,
  auto2top: false
}

And the result right now looks like this:

enter image description here

What I want is to have the subtitles AGB, Style Guide and Start collapsed, in order to only see SW-Module and expand them when clicking on SW-Module.

I tried a lot of different configs, but I couldn't achieve this behaviour yet.

Any help would be greatly appreciated.

Docsify docs

Getter Jetter
  • 2,033
  • 1
  • 16
  • 37

2 Answers2

2

you can edit the file '_sidebar.md' with just the first level of your headers, then use the next config -> { loadSidebar: true, }

in this way, you are gonna have in your left sidebar just the first level but the library is gonna grasp the rest of the hierarchy on the fly. You can expand and collapse each header.

mazeitor
  • 21
  • 2
0

You can use docsify-sidebar-collapse library to do your thing it's easy

you can just put

<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>

before in your index.html file and specify configuration shown below

window.$docsify = {
loadSidebar: true,
...
... //Your other configurations
sidebarDisplayLevel: 0, // set sidebar display level

}

Then just give your sidebar links in _sidebar.md file like this

- [SW-Module](module/README.md)
  - [AGB](module/agb.md)
  - [Style guide](module/styles.md)
  - [Start](module/start.md)

This works like charm

Smit shah
  • 35
  • 8