Jquery accordion collapsed on page load

Question

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.

            <ul>
            <li class="expandable root">

                <label for=" Oraganization" class="active"> Oraganization</label> 
                <span class="pull-right oraganization active expand-icon glyphicon glyphicon-minus"></span> 

                <ul id="accordion">
                    <li class="expandable">
                        <span class="expand-icon active glyphicon glyphicon-minus"></span> 
                        <input type="checkbox" id="Manager-1"> 
                        <label for="Manager-1"> Manager-1</label> 

                        <ul id="accordion">
                            <li>
                                <input type="checkbox" id="Sub-Manager-1"> 
                                <label for="Sub-Manager-1"> Sub-Manager-1</label> 
                            </li>
                            <li class="expandable">
                                <span class="expand-icon active glyphicon glyphicon-minus"></span> 
                                <input type="checkbox" id="Sub-Manager-2"> 
                                <label for="Sub-Manager-2"> Sub-Manager-2</label> 

                                <ul class="accordion">
                                    <li>
                                        <input type="checkbox" id="Associate-1"> 
                                        <label for="Associate-1"> Associate-1</label> 
                                    </li>
                                    <li>
                                        <input type="checkbox" id="Associate-2"> 
                                        <label for="Associate-2"> Associate-2</label> 
                                    </li>



                            <li class="expandable">
                                <span class="expand-icon active glyphicon glyphicon-minus"></span> 
                                <input type="checkbox" id="Associate-5"> 
                                <label for="Associate-5"> Associate-5</label> 
                                <ul class="accordion">
                                    <li>
                                        <input type="checkbox" id="Sub-associate-1"> 
                                        <label for="Sub-associate-1"> Sub-associate-1</label> 
                                    </li>
                                    <li>
                                        <input type="checkbox" id="Sub-associate-2"> 
                                        <label for="Sub-associate-2"> Sub-associate-2</label> 
                                    </li>
                                    <li>
                                        <input type="checkbox" id="Sub-associate-3"> 
                                        <label for="Sub-associate-3"> Sub-associate-3</label> 
                                    </li>   
                                    <li>
                                        <input type="checkbox" id="Sub-associate-4"> 
                                        <label for="Sub-associate-4"> Sub-associate-4</label> 
                                    </li>
                                </ul>
                                </li>
                                </ul>
                                </li>
                            </li>
                        </ul>
                    </li>


                    <li class="expandable">
                                <span class="expand-icon active glyphicon glyphicon-plus"></span> 
                                <input type="checkbox" id="Manager-2"> 
                                <label for="Manager-2"> Manager-2</label> 
                    </li>
                    <li class="expandable">

                                <span class="expand-icon active glyphicon glyphicon-plus"></span> 
                                <input type="checkbox" id="Manager-3"> 
                                <label for="Manager-3"> Manager-3</label> 
                    </li>                       

                </ul>
            </li>
        </ul>

JS File:

$(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);

});

});

You an find the bootply at this link: http://www.bootply.com/1W8bSTnmx6

Answer 1

Fiddle Here

This is because you have this first accordian open when loading it. To fix it, do a click operation on this at the time of load with $($('#accordion .expand-icon')[0]).click(); . Check the working example here http://www.bootply.com/vGoKbvfKtl

Answer 2

you are just displaying all the accordions when the page gets loaded since there is no hiding any where.

According to your code Since only the first Accordion contains the data, it is getting displayed else every expandable div will get displayed.

The solution for this is to add a hide class to the class accordion so that it does not display at the beginning, the at the time of click function, you can remove that class and it gets displayed.

 $(document).ready(function(){ $('.expand-icon').click(function(){ $('ul').removeClass('hide') 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); }); $('.organization').click(function(){ $('.accordion')[0].click() }) });

 <ul> <li class="expandable "> <label for=" Oraganization" class="active"> Oraganization</label> <span class=" organization active expand-icon glyphicon glyphicon-minus"></span> <ul id=""> <li class="expandable"> <span class="expand-icon glyphicon glyphicon-plus"></span> <input type="checkbox" id="Manager-1"> <label for="Manager-1"> Manager-1</label> <ul class="accordion hide"> <li> <input type="checkbox" id="Sub-Manager-1"> <label for="Sub-Manager-1"> Sub-Manager-1</label> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-minus"></span> <input type="checkbox" id="Sub-Manager-2"> <label for="Sub-Manager-2"> Sub-Manager-2</label> <ul class="accordion"> <li> <input type="checkbox" id="Associate-1"> <label for="Associate-1"> Associate-1</label> </li> <li> <input type="checkbox" id="Associate-2"> <label for="Associate-2"> Associate-2</label> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-minus"></span> <input type="checkbox" id="Associate-5"> <label for="Associate-5"> Associate-5</label> <ul class="accordion"> <li> <input type="checkbox" id="Sub-associate-1"> <label for="Sub-associate-1"> Sub-associate-1</label> </li> <li> <input type="checkbox" id="Sub-associate-2"> <label for="Sub-associate-2"> Sub-associate-2</label> </li> <li> <input type="checkbox" id="Sub-associate-3"> <label for="Sub-associate-3"> Sub-associate-3</label> </li> <li> <input type="checkbox" id="Sub-associate-4"> <label for="Sub-associate-4"> Sub-associate-4</label> </li> </ul> </li> </ul> </li> </ul> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-plus"></span> <input type="checkbox" id="Manager-2"> <label for="Manager-2"> Manager-2</label> </li> <li class="expandable"> <span class="expand-icon active glyphicon glyphicon-plus"></span> <input type="checkbox" id="Manager-3"> <label for="Manager-3"> Manager-3</label> </li> </ul> </li> </ul>

Here is the bootply, Bootply link for it