Menu
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!
873
Just add data-toggle="collapse" and a data-target to element, to automatically assign control of a collapsible element. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
In bootstrap context wise, accordion is basically a collapse button with a lot of smaller info in it. Bootstrap use card to make an accordion. on line 1, <div id="accordion" role="tablist"> , this is where the data-parent refers to. on line 2 <div class="card"> , we are using a card class, to show the card effect.
The following example displays a simple accordion by extending the panel component. The use of the data-parent attribute to makes sure that all collapsible elements under the specified parent will be closed when one of the collapsible items is display.
To create an accordion that is collapsed by default, we need to set the 'active' property of the jQuery Accordion as false. Syntax: $("#demoAccordion"). accordion({ collapsible: true, active: false});
I figured a workaround for this. Even without using the data-parent attribute.
https://fiddle.jshell.net/zyd1vL4o/
$(document).ready(function(){
$('.collapse').on('show.bs.collapse', function (e) {
$('.collapse').collapse("hide")
})
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With