Jquery Hide/show destroy Chosen Plugin CSS

Question

<script>
$(document).ready(function(e) {
    $("#b").hide();
    $(".chosen").chosen();

    $("#a").click(function(){$("#b").show();});
});
</script>

<p id="a">aaaa</p>

<div id="b">
<select class="chosen">
<option>Classification</option>
<option>aaaa</option>
<option>bbb</option>
</select>
</div>

I have select drop down list use Chosen Plugin. However when I try to hide the form and use click to show the form, the chosen css layout will get destroyed.

Anyone know how to solve this?

Here is fiddle:

http://jsfiddle.net/cZV6G/

Answer 1

Yes, you can try to set visibility of element.

For resolving this you can use visibility:hidden instead of .hide() and for showing the drop-down use visibility:visible instead of .show().

Try this code:

$(document).ready(function(e) {
    $("#b").css('visibility','hidden');
    $(".chosen").chosen();
    $("#a").click(function(){$("#b").css('visibility','visible');});
});

Try is jsfiddle

Update: Resolve Visibility Problem

There is no problem with jquery .hide(). The real problem is, you hide element before applying the .chosen(). But if you try hide element after applying the .chosen(), then it works correctly.

$(document).ready(function(e) {
    $(".chosen").chosen();
    $("#b").hide();
    $("#a").click(function(){$("#b").show();});
});

Try with .hide()