I have done with Bootstrap 2.0 an accordion which has other accordion in its body:
<div class="accordion" id="accordion1" >
<div class="accordion-group">
<div class="accordion-heading">
<a href="#content1" data-toggle="collapse"
data-parent="#accordion1" class="accordion-toggle">Accordion1</a>
</div>
<div class="accordion-body" id="content1" >
<div class="accordion-inner">
<div class="accordion" id="accordion2">
<div class="accordion-group">
<div class="accordion-heading">
<a href="#content2" data-toggle="collapse"
data-parent="#accordion2">Accordion2</a>
</div>
<div class="accordion-body collapse" id="content2">
<div class="row-fluid">
<div class="span3">
<a href="#">Button1</a>
</div>
<div class="span3">
<a href="#">Button2</a>
</div>
<div class="span3">
<a href="#">Button3</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Using Internet Explorer 9, the first time that I load the principal accordion ( accordion1
), which is loaded opened and the accordion2
closed, when I open the accordion2
,it resizes the height of the accordion1
to show its content correctly. But after that, if I collapse accordion2
, and after I collapse accordion1
too, when I re-open accordion1
and after accordion2
, accordion2
doesn't resize the height of accordion1
...and therefore I don't see the content of accordion2
.
With Firefox there are no problem, Firefox resizes the content of accordion1
without any problem. I tried to put property height:auto
but it doesn't do anything...
Thanks.
I've solved my problem. The solution is that Internet Explorer 9 have this bug, but in Internet Explorer 10 this problem is solved.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.