Why might an accordion not work in Bootstrab?

Question

JavaScript

This piece of code is from one big page.

The problem is that the piece of code doesn't work like an accordion*, i.e. two elements can be kept open at the same time.

- Yes, JS is included.
- Yes, there are no errors in the console.
Yes, I have read the documentation.
- Yes, elements open and close on click, the essence of the problem is described above.

<div class="col-sm-3 col-md-2 sidebar" id="sidebar-collapse">
        <ul class="nav nav-sidebar">
            <li>
                <a data-toggle="collapse" data-parent="#sidebar-collapse" href="#category-4">Категория 0</a>

                <ul class="nav nav-tutorial collapse" id="category-4">
                    <li>
                        <a href="/ajax/articleget?id=1">Acer Aspire V5</a>
                    </li>
                    <li>
                        <a href="/ajax/articleget?id=10">asdasd</a>
                    </li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" data-parent="#sidebar-collapse" href="#category-5">Категория 1</a>

                <ul class="nav nav-tutorial collapse" id="category-5">
                    <li>
                        <a href="/ajax/articleget?id=8">sdfsdfsd</a>
                    </li>
                </ul>
            </li>
            <li>
                <a data-toggle="collapse" data-parent="#sidebar-collapse" href="#category-6">Категория 2</a>

            </li>
        </ul>
    </div>

*for those who do not know what an "accordion" is:

This type of menu was named accordion in honor of a musical instrument (of course, the button accordion, or accordion is closer to us :) ), because in it, like in an accordion, the expansion of one area occurs due to the compression of the other. In typical cases, the height of the accordion is fixed, so one - and only one - menu area can be visible at a time; however, some accordions allow you to hide this area as well - so that in general all menu items are collapsed.

Answer 1

open the collapse.js plugin code and on the 41st line we see
this means that all top-level lis must have the class .panel

Answer 2

get acquainted with Firebug, it will answer many
layout questions, it’s not enough, you also need to connect js

Answer 3

Connect the bootstrap js, if it doesn't help, open the console and see if there are any errors, perhaps because of them the necessary actions are not processed

Answer 4

in links instead of href="#category4" type data-target="#category4"It should work