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 .
add an id to the dropdown toggle link.
example:
id="actionButton"
and with jQuery
function actionButtonExpand() {
var actionButtonDropdownMenuHeight=$(this).parent().children(".dropdown-menu").height()+19;
var actionButtonAccordionBodyHeight = $(this).parent().parent().parent().height();
var actionButtonAccordionBodyExtended = actionButtonDropdownMenuHeight+actionButtonAccordionBodyHeight;
$(this).dropdown();
if($(this).parent().hasClass("open")){
$(this).parent().parent().parent().css("height","");
$(this).parent().css("margin-bottom","9px");
} else {
$(this).parent().parent().parent().height(actionButtonAccordionBodyExtended);
$(this).parent().css("margin-bottom",actionButtonDropdownMenuHeight);
}
}
function actionButtonContract() {
$("#actionButton").parent().parent().parent().css("height","");
$("#actionButton").parent().css("margin-bottom","9px");
}
$("#actionButton").click(actionButtonExpand);
$(".accordion-toggle").click(actionButtonContract);
http://jsfiddle.net/baptme/6yAnc/