How to make bootstrap-multiselect invisible my default?

Question

I am using the bootstrap-multiselect plugin to make dealing with drop down menu easier. However, I am having an issue when trying to make the menu hidden by default.

Basically, I have a check box, when this check box is check then I display the drop down men. And when it is unchecked the menu should become hidden. The check box is unchecked by default so I want the menu to be hidden by default as well.

I tried to hide the menu using basic css code to my select menu like so:

<select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">....</select>

But this seems to be overridden by something in the bootstrap-multiselect. If I remove the plugin the the show/hide function works fine with no issue.

This is my current code for the menu

    $(function(){

        $("#related_calls_menu").multiselect({
            enableFiltering: true,
            enableCaseInsensitiveFiltering: true,
            selectedClass: null,
            selectAllText: 'Select All',
            includeSelectAllOption: true,
            nonSelectedText: 'Select Related Account(s)',
            buttonWidth: '300px'
         });

        $(window).load(function(){
            $("#related_calls_menu").hide();
        });

        $('#complete_related_calls').click(function(){

            if( $(this).is(':checked') )
                $("#related_calls_menu").show();
            else
                $("#related_calls_menu").hide();
        });
    });

I have tried adding .css('visability: hidden; display:none;'); to $("#related_calls_menu")

I have also tried adding this code

    $(window).on('load', function(){
        $("#related_calls_menu").hide();
    });

Nothing is really working, I can't seems to hide the menu what so ever. Also, when I click on the check box to show the menu I get a second menu that it does not have plugin look.

here is a screenshot BEFORE the check box

here is a screenshot AFTER the check box

Please Advise.

Answer 1

The Select tag is already hidden by bootstrap.

put a wrapper div around your select tag like this

<div id="mywrapper">
  <select name="menu" id="related_calls_menu" style="display: none;" multiple="multiple">....                    </select>
</div>

then you can control the wrapping div like this:

CSS:

#mywrapper{
display:none;
}

jQuery

$("#mywrapper").show();
$("#mywrapper").hide();