https://fiddle.jshell.net/8v72rtxb/
I have the following code.
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
Studies
</a>
<div class="collapse" id="studies-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
Research
</a>
<div class="collapse" id="research-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
I have no idea why data-parent doesn't work though. Expand one collapse div doesn't close the other collapse. I tried to copy the code from the example of bootstrap, but it still doesn't work.
Also in my project, I include jquery.js
before bootstrap.min.js
. I have checked some other questions, they said that bootstrap.min.js
might have been included twice. But should that be the case?
Thanks for reading!