title: Jquery accordion collapsed on page load
body: <p>I am trying to create an expandable accordion using jquery. I am not able to figure out that how am I supposed to prevent it from expanding on page load. I have no idea of jquery,and any help will be greatly appreciated.</p>
  
  <pre><code>            &lt;ul&gt;
              &lt;li class="expandable root"&gt;
  
                  &lt;label for=" Oraganization" class="active"&gt; Oraganization&lt;/label&gt; 
                  &lt;span class="pull-right oraganization active expand-icon glyphicon glyphicon-minus"&gt;&lt;/span&gt; 
  
                  &lt;ul id="accordion"&gt;
                      &lt;li class="expandable"&gt;
                          &lt;span class="expand-icon active glyphicon glyphicon-minus"&gt;&lt;/span&gt; 
                          &lt;input type="checkbox" id="Manager-1"&gt; 
                          &lt;label for="Manager-1"&gt; Manager-1&lt;/label&gt; 
  
                          &lt;ul id="accordion"&gt;
                              &lt;li&gt;
                                  &lt;input type="checkbox" id="Sub-Manager-1"&gt; 
                                  &lt;label for="Sub-Manager-1"&gt; Sub-Manager-1&lt;/label&gt; 
                              &lt;/li&gt;
                              &lt;li class="expandable"&gt;
                                  &lt;span class="expand-icon active glyphicon glyphicon-minus"&gt;&lt;/span&gt; 
                                  &lt;input type="checkbox" id="Sub-Manager-2"&gt; 
                                  &lt;label for="Sub-Manager-2"&gt; Sub-Manager-2&lt;/label&gt; 
  
                                  &lt;ul class="accordion"&gt;
                                      &lt;li&gt;
                                          &lt;input type="checkbox" id="Associate-1"&gt; 
                                          &lt;label for="Associate-1"&gt; Associate-1&lt;/label&gt; 
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;input type="checkbox" id="Associate-2"&gt; 
                                          &lt;label for="Associate-2"&gt; Associate-2&lt;/label&gt; 
                                      &lt;/li&gt;
  
  
  
                              &lt;li class="expandable"&gt;
                                  &lt;span class="expand-icon active glyphicon glyphicon-minus"&gt;&lt;/span&gt; 
                                  &lt;input type="checkbox" id="Associate-5"&gt; 
                                  &lt;label for="Associate-5"&gt; Associate-5&lt;/label&gt; 
                                  &lt;ul class="accordion"&gt;
                                      &lt;li&gt;
                                          &lt;input type="checkbox" id="Sub-associate-1"&gt; 
                                          &lt;label for="Sub-associate-1"&gt; Sub-associate-1&lt;/label&gt; 
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;input type="checkbox" id="Sub-associate-2"&gt; 
                                          &lt;label for="Sub-associate-2"&gt; Sub-associate-2&lt;/label&gt; 
                                      &lt;/li&gt;
                                      &lt;li&gt;
                                          &lt;input type="checkbox" id="Sub-associate-3"&gt; 
                                          &lt;label for="Sub-associate-3"&gt; Sub-associate-3&lt;/label&gt; 
                                      &lt;/li&gt;   
                                      &lt;li&gt;
                                          &lt;input type="checkbox" id="Sub-associate-4"&gt; 
                                          &lt;label for="Sub-associate-4"&gt; Sub-associate-4&lt;/label&gt; 
                                      &lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;/li&gt;
                                  &lt;/ul&gt;
                                  &lt;/li&gt;
                              &lt;/li&gt;
                          &lt;/ul&gt;
                      &lt;/li&gt;
  
  
                      &lt;li class="expandable"&gt;
                                  &lt;span class="expand-icon active glyphicon glyphicon-plus"&gt;&lt;/span&gt; 
                                  &lt;input type="checkbox" id="Manager-2"&gt; 
                                  &lt;label for="Manager-2"&gt; Manager-2&lt;/label&gt; 
                      &lt;/li&gt;
                      &lt;li class="expandable"&gt;
  
                                  &lt;span class="expand-icon active glyphicon glyphicon-plus"&gt;&lt;/span&gt; 
                                  &lt;input type="checkbox" id="Manager-3"&gt; 
                                  &lt;label for="Manager-3"&gt; Manager-3&lt;/label&gt; 
                      &lt;/li&gt;                       
  
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>JS File:</p>
  
  <pre><code>$(document).ready(function(){
  
  $('.expand-icon').click(function(){
  
      var elem = $(this);
      if(elem.hasClass('active')) {
          elem.removeClass('active');
  
          var subElem = elem.siblings('ul');
          var nestedElem =elem.siblings('ul').find('ul');
  
          if(nestedElem.length == 0) {
              subElem.slideUp('fast');
          }
          else {
              nestedElem.slideUp('fast',function(){
                  subElem.slideUp('fast');
              });
          }
          $.when(elem.removeClass('glyphicon-minus')).then(function(){
              elem.addClass('glyphicon-plus');
          });
      }
      else {
          elem.addClass('active');
          elem.siblings('ul').slideDown('fast',function(){
              elem.siblings('ul').find('ul').slideDown('fast');   
          });
          $.when(elem.removeClass('glyphicon-plus')).then(function(){
              elem.addClass('glyphicon-minus');
          });
      }
  
  });
  
  
  $('.expandable :checkbox').on('change', function() {
  
      $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
      var sibs = false;
      $(this).closest('ul').children('li').each(function () {
          if($('input[type=checkbox]', this).is(':checked')) sibs=true;
      });
      $(this).parents('ul').siblings(':checkbox').prop('checked', sibs);
  
  });
  </code></pre>
  
  <p>});</p>
  
  <p>You an find the bootply at this link: <a href="http://www.bootply.com/1W8bSTnmx6" rel="nofollow">http://www.bootply.com/1W8bSTnmx6</a></p>