In the code snippet provided, there is a button in each row that serves two functions: expanding and collapsing the specific row where the button is located.
<div class="">
<ul>
<li
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}}"
>
<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/expand
</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>
The challenge I am facing is that when collapsing a row, the button within that row also collapses and becomes invisible for expansion. How can this issue be resolved?
Below are the click events for the buttons:
$("#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");
});
});
});