title: Collapsible menu in jquery
body: <p>I have a side collapsible panel , on clicking the arrow icon the sub contents are hidden , and once hidden on clicking the arrow the sub contents are shown.
  There is a jquery code for the slide down and slide up function , is there a way by default the sub contents are hidden and onclicking the arrow the sub content are shown or hidden accordingly?
  The code is as</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>jQuery(function($) {
    $('.active span.clickable').on("click", function(e) {
      if ($(this).hasClass('panel-collapsed')) {
        // expand the panel
        $(this).parents('.active').find('.collapsein').slideDown();
        $(this).removeClass('panel-collapsed');
        $(this).find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
      } else {
        // collapse the panel
        $(this).parents('.active').find('.collapsein').slideUp();
        $(this).addClass('panel-collapsed');
        $(this).find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
      }
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;li class="active"&gt;
    &lt;a href="#"&gt;Main Data&lt;span class="pull-right clickable "&gt;&lt;i class="glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;&lt;/span&gt;&lt;/a&gt;
    &lt;ul class="collapsein "&gt;
      &lt;li&gt;&lt;label&gt;Sub Data1&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;Sub Data2&lt;/label&gt;&lt;/li&gt;
      &lt;li&gt;&lt;label&gt;Sub Data3&lt;/label&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;</code></pre>
  </div>
  </div>
  </p>