Twitter Bootstrap Accordion and button dropdown overflow issue

Question

I\'m using Bootstrap for a section of my website. I mix accordion with a dropdown button. The problem comes when the button is on the bottom, the drop-down is hidden since the .

Answer 1

Original Idea

You were very close with your solution. This is it:

.accordion-body.in { overflow:visible; }

The .in class is added when opened, and thus only sets visibility when open.

See the example fiddle.

Update That May Help with Chrome Bug

The bug mg1075 notes below can be solved by a slight change to the code above, like so:

.accordion-body.in:hover { overflow:visible; }

This essentially prevents the overflow from occurring before the animation is complete. It works well, except that when you click your down button to open the dropdown, and then exit the .accordion-body it will crop off the dropdown again, but only until you mouseover the dropdown area again. Some might consider the behavior preferable.

See the fiddle with the update code.