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

```js
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');
    }
  });
});
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="active">
  <a href="#">Main Data<span class="pull-right clickable "><i class="glyphicon glyphicon-chevron-down"></i></span></a>
  <ul class="collapsein ">
    <li><label>Sub Data1</label></li>
    <li><label>Sub Data2</label></li>
    <li><label>Sub Data3</label></li>
  </ul>
</li>
```