Subitems of different element open, besides of intended ones - html

Question

I would like to know why when clicking on "Capítulo 4" also the subitems of "Capítulo 6" open?
Same happens when clicking on "Capítulo 2", subitems of "Capítulo 1" open.
CODEPEN:
https://codepen.io/ogonzales/pen/QWjmorP
$(document).ready(function () {
$('#sidebarCollapse').on('click', function () {
$('#sidebar').toggleClass('active');
});
});

Answer 1

The things happen here is because you didn't use unique id for your ul items. So whenever you trying to open/close one of your collapsable ul by referring them with anchor tag href, since their id is not unique both uls will get open. In order to fix this, give each ul a unique id and then refer to that unique id with your desired a tag. You can read more about ids here.
For more illustration, let's say we got this ul element:
<ul class="collapse list-unstyled" id="homeSubmenu">
<li>
Introducción
</li>
<li>
¿Qué es la salvación?
</li>
<li>
¿Se pierde la salvación?
</li>
</ul>
and the corresponding anchor tag for this should be this one:
<a href="#homeSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
There is an id of homeSubmenu which relate to ul element and we are referring to that with href="#homeSubmenu".
So the next item should have a different id to work as expected, let's pick another one:
<ul class="collapse list-unstyled" id="homeSubmenu2">
<li>
Introducción
</li>
<li>
¿Qué es la salvación?
</li>
<li>
¿Se pierde la salvación?
</li>
</ul>
So the corresponding to that should be this one:
<a href="#homeSubmenu2" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
Here is the full working demo: codepen.io