默认情况下，在Data-toggle =“ collapse”引导下打开导航

Question

I am new to bootstrap. I am making an sidebar accordion navigation using data-toggle="collapse" but it closes the navigation by default. what should i do to open navigation by default and it get close when i click on it.

HTML

<li class="parent "><a  href="#sub-item-3" data-toggle="collapse"><span  class="glyphicon glyphicon-list"></span> Summary<span data-toggle="collapse" href="#sub-item-3" class="icon pull-right"><em class="glyphicon glyphicon-s glyphicon-plus"></em></span></a>
    <ul class="children collapse" id="sub-item-3">
        <li><a class="" href="#"><span class="glyphicon glyphicon-share-alt"></span> Sub Item 1</a></li>
        <li><a class="" href="#"><span class="glyphicon glyphicon-share-alt"></span> Sub Item 2</a></li>
        <li><a class="" href="#"><span class="glyphicon glyphicon-share-alt"></span> Sub Item 3</a></li>
    </ul>
</li>

JS

!function ($) {
    $(document).on("click","ul.nav li.parent > a > span.icon", function(){          
        $(this).find('em:first').toggleClass("glyphicon-minus");      
    }); 
    $(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}(window.jQuery);

Answer 1

You need to add the in class to the ul. ie:

<ul class="children in collapse" id="sub-item-3">