Should fix #699, #679, #680 and #655.

index.html

@@ -617,6 +617,48 @@
 </script>
 </pre>
                                     </div>
+                                    
+                                    <p>
+                                        Both options, <code>enableCollapsibleOptGroups</code> and <code>enableCollapsibleOptGroups</code>, can also be combined:
+                                    </p>
+                                    
+                                    <p class="alert alert-warning">
+                                        Note, however, that the behavior of combining both options might not be as expected - play around with the below example to get some intuition.
+                                    </p>
+                                    
+                                    <div class="example">
+                                        <script type="text/javascript">
+                                            $(document).ready(function() {
+                                                $('#example-enableCollapsibleOptGroups-enableClickableOptGroups').multiselect({
+                                                    enableClickableOptGroups: true,
+                                                    enableCollapsibleOptGroups: true
+                                                });
+                                            });
+                                        </script>
+                                        <select id="example-enableCollapsibleOptGroups-enableClickableOptGroups" 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-enableClickableOptGroups').multiselect({
+            enableClickableOptGroups: true,
+            enableCollapsibleOptGroups: true
+        });
+    });
+&lt;/script&gt;
+</pre>
                                 </td>
                             </tr>
                             <tr>

tests/spec/bootstrap-multiselect.js

@@ -266,7 +266,7 @@ describe('Bootstrap Multiselect "Single Selection"', function() {
     });
 });
 
-describe('Bootstrap Multiselect "Optgroups"', function() {
+describe('Bootstrap Multiselect "Clickable Optgroups"', function() {
     
     // Count the number of onChanges fired.
     var fired = 0;
@@ -297,7 +297,7 @@ describe('Bootstrap Multiselect "Optgroups"', function() {
     
     it('Should correctly create labels for optgroups.', function() {
         expect($('#multiselect-container li.multiselect-group').length).toBe(10);
-        expect($('#multiselect-container li.multiselect-group-clickable').length).toBe(10);
+        expect($('#multiselect-container li.multiselect-group input').length).toBe(10);
         
         $('#multiselect-container label.multiselect-group').each(function() {
             expect($('input', $(this)).length).toBe(10);