Need help on expand/collapse functionality on service portal side

[rahul gupta6]

Hi,

I am working on implementing expand/collapse functionality on service status page.

There are categories and child hyperlinks with their statuses on 5 different days under those categories.

The data is populating dynamically from a table when the page loads.

The requirement is that child hyperlinks on page should be collapsible. Whenever, we click on a category, the child hyperlinks along with their statuses should be collapsed inside that category.

In the widget coding, HTML part has data in table format with loop concept as ng-repeat-start="category in ::c.data.categories"

Can you assist here.

[U_verma]

Hi 

you can use this

HTML::

<div>
<a id="toggleSection" data-toggle="collapse" data-target="#submitRequest" ng-click="isCollapsed=!isCollapsed" >
<h4 id="request-form"> Header URL
<span id="plusMinusButton" class="glyphicon" ng-class="{'glyphicon-menu-down':isCollapsed, 'glyphicon-menu-right':!isCollapsed}"></span>

</h4></a></div>

<div id="submitRequest" class="panel-collapse collapse" style="padding-top:15px;">
You can put your display value inside this div

</div>

Client Script

api.controller=function() {
/* widget controller */
var c = this;
if (c.data.expandForm == 'true') {
var el = angular.element('#submitRequest');
el.attr('aria-expanded', 'true');
el.addClass('in');
el.css("height", "100%");
var el2 = angular.element('#plusMinusButton');
el2.removeClass('glyphicon-plus');
el2.addClass('glyphicon-minus');
$scope.isCollapsed = !$scope.isCollapsed;
};
};