Expanding and collapsing in UL tag

Question

I have the follwing HTML, where there is a collapse (collapsebutton1) and expand button (expandbutton1) which will collapse and expand the div networkDevicesCollapsePanel, this is working as expected.

Now i need to bring the collapse and expand in each < UL >. There are three UL here, but there may be more later. How to achieve this?

<div class="col-xs-4">
<div class="panel" id="networkDevicesLinks">
 <div style="float:right;">                                       
                <div ng-show="ciAttributesCount>0" id="collapsebutton1" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                <div ng-show="ciAttributesCount>0" id="expandbutton1" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
            </div>
 <div class="panel-collapse collapse in" id="networkDevicesCollapsePanel">
                    <ul ng-repeat="nav in ciRelationshipHierarchyBySection" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list">
                        <li>
                            <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />

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

Button Click code below

 $("#expandbutton1").hide();

        $("#expandbutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
            $("#expandbutton1").hide();
            $("#collapsebutton1").show();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
            });
        });

        $("#collapsebutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').removeClass('in');
            $("#expandbutton1").show();
            $("#collapsebutton1").hide();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
            });
        });
    });

Answer 1

It may provide an idea,Try to use angular $index to toggle arrow and toggle client div.

And in angular we can assign each UL with dynamic classes which is hosted from expand and collapse button

                           <div class="col-xs-4">
                                    <div class="panel" id="networkDevicesLinks">
                                        <div style="float:right;" ng-repeat="nav in ciRelationshipHierarchyBySection track by $index">
                                            <div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                                            <div ng-show="ciAttributesCount" id="expandbutton1_{{$index}}" class="disp expandcollapse expand-collapse-new-link-button no-print"><i class="glyphicon glyphicon-plus"></i>Expand All</div>
                                        </div>
                                        <div class="" >
                                            <ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">
                                                <li>
                                                    <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a> <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span><br />
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>

Revised Code below:

I am able to put collapse button in each repeat, but when i click, it opening a popup , instead of collapsing and expanding. Please see where it is wrong

<div class="">

                        <ul ng-repeat="nav in ciRelationshipHierarchyBySection track by $index" style="background:none; padding:0 10px;margin:5px;" class="nav nav-list panel-collapse collapse in" id="networkDevicesCollapsePanel_{{$index}}">

                            <li>
 <div ng-show="ciAttributesCount" id="collapsebutton_{{$index}}" data-toggle="collapse" data-target="#networkDevicesCollapsePanel_{{$index}}" class="nodisp expandcollapse  no-print"><i class="glyphicon glyphicon-minus"></i>Collapse All</div>
                                <a style="cursor:pointer; padding: 2px 12px;" ng-click="showNetworkDevices(nav.IdentificationSourceId)">{{nav.IdentifySourceName}}</a>
                                <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
                                <br />
                                <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
                                <br />
                            </li>
                        </ul>
                    </div>