Example for...

Example for http://stackoverflow.com/questions/36892089/how-can-i-make-bootstrap-multiselect-optgroups-collapse-by-default.

dist/js/bootstrap-multiselect.js

@@ -796,7 +796,7 @@
 
                     var visible = true;
                     $inputs.each(function() {
-                        visible = visible && $(this).is(':visible');
+                        visible = visible && !$(this).hasClass('multiselect-collapsible-hidden');
                     });
 
                     if (visible) {

index.html

@@ -670,8 +670,10 @@
                                         <script type="text/javascript">
                                             $(document).ready(function() {
                                                 $('#example-enableCollapsibleOptGroups').multiselect({
-                                                    enableCollapsibleOptGroups: true
+                                                    enableCollapsibleOptGroups: true,
+                                                    buttonContainer: '<div id="example-enableCollapisbleOptGroups-container" />'
                                                 });
+                                                $('#example-enableCollapisbleOptGroups-container .caret-container').click();
                                             });
                                         </script>
                                         <select id="example-enableCollapsibleOptGroups" multiple="multiple">
@@ -740,6 +742,48 @@
     });
 &lt;/script&gt;
 </pre>
+                                    </div>
+
+                                    <p>
+                                        The groups can be collapsed by default using the following simple trick:
+                                    </p>
+
+                                    <div class="example">
+                                        <script type="text/javascript">
+                                            $(document).ready(function() {
+                                                $('#example-enableCollapsibleOptGroups-collapsed').multiselect({
+                                                    enableCollapsibleOptGroups: true,
+                                                    buttonContainer: '<div id="example-enableCollapsibleOptGroups-collapsed-container" />'
+                                                });
+                                                $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
+                                            });
+                                        </script>
+                                        <select id="example-enableCollapsibleOptGroups-collapsed" multiple="multiple">
+                                            <optgroup label="Group 1">
+                                                <option value="1-1" disabled>Option 1.1</option>
+                                                <option value="1-2" selected="selected">Option 1.2</option>
+                                                <option value="1-3" selected="selected">Option 1.3</option>
+                                            </optgroup>
+                                            <optgroup label="Group 2">
+                                                <option value="2-1">Option 2.1</option>
+                                                <option value="2-2">Option 2.2</option>
+                                                <option value="2-3">Option 2.3</option>
+                                            </optgroup>
+                                        </select>
+                                    </div>
+                                    <div class="highlight">
+                                        <pre class="prettyprint linenums">
+&lt;script type=&quot;text/javascript&quot;&gt;
+$(document).ready(function() {
+    $('#example-enableCollapsibleOptGroups-collapsed').multiselect({
+        enableCollapsibleOptGroups: true,
+        buttonContainer: '&lt;div id=&quot;example-enableCollapsibleOptGroups-collapsed-container&quot; /&gt;'
+    });
+    $('#example-enableCollapsibleOptGroups-collapsed-container .caret-container').click();
+});
+&lt;/script&gt;
+                                        </pre>
+                                    </div>
 
                                     <p>
                                         Combining the above with <code>enableFiltering</code> and <code>includeSelectAllOption</code>:
@@ -786,6 +830,7 @@
     });
 &lt;/script&gt;
 </pre>
+                                    </div>
                                 </td>
                             </tr>
                             <tr>