Possible to use a second level of navigation?

[nbambou]

First bix thanks for your work and sharing it.

Would it be possible to work with a second level deep? Would you like to share the code with some comments?

Second question: List accordion doesn't work for me.

Here ist the html code:

• Item 1

  Test

• Item 2

  Test

Unfortunately nothing happens. Sure the problem is in front the keyboard.

Would also like to donate for your work.

Regards Nick

[madodig]

Hi! Unfortunately, only one level deep submenus work at the moment. If you try to add #2# you will most probably break rendering of the site. Priority for me was one level at the time. 2nd level was nice to have, but it seemed too complex since I'm rewriting the page elements. Wiki.js v3 should be out soon, we'll see what it brings. Hopefully this will be supported natively (with static navigation included). If it isn't, maybe I'll look into implementing it here.

I'm glad you like this code and find it useful. Haven't thought about donations at all. Maybe I set it up in the future, in the meantime you can consider donating to @NGPixel who is lead developer and maintainer of Wiki.js.

[madodig]

Regarding the second question. You mentioned HTML Code; are you using Code (Raw HTML) Editor for the page? You should be using Markdown, and wrap your list with div element. List indentation is important. If you're using Markdown editor, maybe you're using it inside tabsets; it doesn't work there since tabsets use # characters to mark the tabs so they collide.

Example from README:

<div id="faccordion">

- ### Item 1
  Text

- ### Item 2
  Text

- ### Section 1
  Text

  - #### Section 1, item 1
    Text

  - #### Section 2
    Text

    - ##### Section 2, Item 1
      Text

    - ##### Section 2, Item 2
      Text

- ### Item 3
  Text

</div>

[madodig]

To make it work with Code (Raw HTML) editor, this is how markdown example should be rewritten:

<div class="faccordion">
  <ul>
    <li>
      <h3 id="item-1" class="toc-header"><a href="#item-1" class="toc-anchor"></a> Item 1</h3>
      <p>Text</p>
    </li>
    <li>
      <h3 id="item-2" class="toc-header"><a href="#item-2" class="toc-anchor"></a> Item 2</h3>
      <p>Text</p>
    </li>
    <li>
      <h3 id="section-1" class="toc-header"><a href="#section-1" class="toc-anchor"></a> Section 1</h3>
      <p>Text</p>
      <ul>
        <li>
          <h4 id="section-1-item-1" class="toc-header"><a href="#section-1-item-1" class="toc-anchor"></a> Section 1, item 1</h4>
          <p>Text</p>
        </li>
        <li>
          <h4 id="section-2" class="toc-header"><a href="#section-2" class="toc-anchor"></a> Section 2</h4>
          <p>Text</p>
          <ul>
            <li>
              <h5 id="section-2-item-1" class="toc-header"><a href="#section-2-item-1" class="toc-anchor"></a> Section 2, Item 1</h5>
              <p>Text</p>
            </li>
            <li>
              <h5 id="section-2-item-2" class="toc-header"><a href="#section-2-item-2" class="toc-anchor"></a> Section 2, Item 2</h5>
              <p>Text</p>
            </li>
          </ul>
        </li>
      </ul>
    </li>
    <li>
      <h3 id="item-3" class="toc-header"><a href="#item-3" class="toc-anchor"></a> Item 3</h3>
      <p>Text</p>
    </li>
  </ul>
</div>

[nbambou]

2nd Level: If you could comment your code a little bit I would ask some colleagues to try to add a 2nd Level. Unfortunately I can't do it myself, but they're website programmers.

List accordion: Try with both. Markdown and RAW html. Doesn't work. No idea why.

Installation: copy mad-wikijs-customization.css mad-wikijs-customization.js wjs_html-injection-code.body wjs_html-injection-code.head to /var/www/wikijs/assets/wjsccode/

Wikijs Theme looks like this:

Collapsible menu works as expected. List accordian not. Looks like this:

[madodig]

You've got an error in the config: boolean vars should have values trueor false, not enable. Change it from enable to true or false, and it should work. This error obviously breaks the code execution.

[nbambou]

Yea, did a mistake because working for hours at the problem. But this is not the reason. Doesn't work with "true" or "false" either.

Everything else works. So if I use true or false the result is as expected. Only accordion does not work. I am desperate right now.

[madodig]

It's working on my side. Are there any errors in the console (browser dev tools)?

[madodig]

Since I can't reproduce the issue and there hasn't been an update for over 30 days, I'm closing this issue.

[madodig]

Regarding the accordion issue, I've updated the code sometime in the past and haven't updated the README so the example doesn't work. The opening tag should look like this: <div class="faccordion">