jQuery Chosen div falls behind Twitter Bootstrap accordion

Question

I'm using the jQuery Chosen plugin inside a Twitter Bootstrap accordion. The problem that I have is that the dropdown menu of the Chosen plugin appears 'under' the div of the accordion menu. I tried to set the z-index to a higher value, but that didn't do the trick.

I made an example of my problem: http://jsfiddle.net/8BAZY/1/

If you click on the select box you'll see that the menu appears under the div. How can I let the dropdown appear ontop of the accordion div, so I can see all the results?

Answer 1

More info on this chosen issue is here https://github.com/harvesthq/chosen/issues/86

One solution based on the suggestions given on that page by PilotBob http://jsfiddle.net/8BAZY/6/

$(function() {
    var els = jQuery(".chzn-select");
    els.chosen({no_results_text: "No results matched"});
    els.on("liszt:showing_dropdown", function () {
            $(this).parents("div").css("overflow", "visible");
        });
    els.on("liszt:hiding_dropdown", function () {
            $(this).parents("div").css("overflow", "");
        });
});

Thanks.