Menu
The first time you click to open the bootstrap "collapsible" accordion in IE 7/8/9, it does not open. Anyone else run into this or can figure out why?
Thanks
jsfiddle demo: http://jsfiddle.net/pWU4n/7/
<div class="accordion category-list-accordion">
<div id="category-5" class="accordion-group" style="display: block; ">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse">
CLICK ME TWICE THE FIRST TIME TO OPEN IN IE
</a>
</div>
<div id="category-5-accordion" class="accordion-body collapse">
<div class="accordion-inner span33">
"Bootstrap was made to not only look and behave great in the latest desktop browsers (as well as IE7!)"
</div>
</div>
</div>
</div>
$(document).ready(function() {
$("#category-5").click(function() {
$("#category-5-accordion").collapse("toggle");
});
});
<head> includes :
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
875
This problem is not related to IE : this will happen on any browser that doesn't support transitions (or if it is deactivated).
That's because you need to initialize the plugin first. If you don't, it both initializes and toggles the collapse on the first click : the default initialization toggles the collapse (doc), and without the transitions, the collapse is toggled twice in a row without being seen.
Here is what you should do :
$("#category-5-accordion").collapse({toggle: false});
$("#category-5").click(function() {
$("#category-5-accordion").collapse("toggle");
});
Demo (jsfiddle)
162
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
