How to expand and collapse div using Angular.js

Question

I need to expand the div elements while click on a link and collapse it using Angular.js. I am providing my code below.

<a class="collapsed panel-title sky-blue-light" role="button" data-toggle="collapse"  href="#" aria-expanded="true" style="border-bottom:none;" ng-click="showSubDiv();">
AAC1 - The organisation defines and displays the healthcare services that it can provide

<div class="smbtn btn"  data-toggle="confirmation"  data-placement="top"><i class="fa fa-check" aria-hidden="true"></i></div>
<div class="smbtn status amberbg" data-toggle="tooltip" title="Work in Progress"><i class="fa fa-hourglass-o" aria-hidden="true"></i></div>
<div class="descriptionlink smbtn btn" data-toggle="tooltip" title="Description"><i class="fa fa-question" aria-hidden="true"></i></div>
<div class="clear"></div>
</a>

When user will click on this anchor link the below part will expand and when click again it will collapse.

<div id="inner1collapsea-5-1" class="panel-collapse collapse" ng-show="showsubdiv">
<div class="panel-body padding0" style="border-top:none;">
  <div class="panel-group popup-accordian accordioninner accordioninner-inner">
<div class="panel panel-default" style="border:1px solid #66afe9;">
<div class="panel-heading">
<a class="panel-title sky-blue-light auditformpopup" role="button" ui-sref="subclause">
AAC1-A - The services being provided are clearly defined. The healthcare services being provided are clearly defined and are in consonance with the needs of the community.

</a>
</div>

</div>
</div>
</div>

I need when user will click on that above link this dive will expand and when clicked again on that same link it will collapse again. I want to make it using Angular.js.

Possible duplicate of [Expand and collapse with angular js](https://stackoverflow.com/questions/12603425/expand-and-collapse-with-angular-js) — Vikasdeep Singh, Oct 25 '17 at 06:26
Trying again to mark this as a possible duplicate, cc @VicJordan. — halfer, May 03 '19 at 21:42

score 1 · Accepted Answer · answered Oct 25 '17 at 06:48

There is a problem is your code Please remove collapse class from your panel as your div is always collapsed for this reason . And you can write a function on your click in javascript like :

$scope.showTest = false;
$scope.showSubDiv = function (){
      $scope.showTest = !$scope.showTest;
 }

And in your html :

<div id="inner1collapsea-5-1" class="panel-collapse" ng-show="showTest">

    <div class="panel-body padding0" style="border-top:none;">
        <div class="panel-group popup-accordian accordioninner 
 accordioninner-inner">
        <div class="panel panel-default" style="border:1px solid #66afe9;">
            <div class="panel-heading">
                <a class="panel-title sky-blue-light auditformpopup" 
role="button" ui-sref="subclause">
AAC1-A - The services being provided are clearly defined. The healthcare 
services being provided are clearly defined and are in consonance with the 
 needs 
of the community.

 </a>
            </div>

        </div>
    </div>
</div>

you forgot to add one div in the end here.

Secondly you have to remove href="#" from anchor tag and write anchor tag only for paragraph not for the button .

<a class="collapsed panel-title sky-blue-light" role="button" data-
toggle="collapse" aria-expanded="true" style="border-bottom:none;" ng-
click="showSubDiv();">
AAC1 - The organisation defines and displays the healthcare services that it 
can provide</a>

score 0 · Answer 2 · answered Oct 25 '17 at 06:28

0

this one is related to your question i think

code below

<a ng-click="doSomething($event)">do something</a>


$scope.doSomething = function(ev) {
var element = ev.srcElement ? ev.srcElement : ev.target;
console.log(element, angular.element(element)) }

answered Oct 25 '17 at 06:28

Muhammad Ihsan Habibi

21
3

score 0 · Answer 3 · answered Oct 25 '17 at 06:47

0

In order achieve this you will have to create a custom directive and inroduce certain certain css changes. Here is the link that elaborates the solution.

answered Oct 25 '17 at 06:47

Mudassar

3,135
17
22

score 0 · Answer 4 · answered Oct 25 '17 at 06:59

Here is the similar thing that you are trying to do. Hope it will help you.

(function(){
    angular
        .module('myApp',[])
        .controller('myCtrl', Controller);
    Controller.$inject = ['$rootScope', '$scope'];
    function Controller($rootScope, $scope){       
      
    }
})();

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<div 
     ng-app="myApp" 
     ng-controller="myCtrl">
  <div class="foreign-supplier-title clearfix" ng-click="showDetails = ! showDetails">
  <h4>
   <span class="foreign-supplier-arrow"><i ng-class="!showDetails?'fa fa-angle-right':'fa fa-angle-down'" aria-hidden="true"></i></span>
   <span class="foreign-supplier-text">Click here to see magic</h4>
 </div>
 <div ng-if="showDetails">
  <h2>Hello World</h2> </div>
</div></body>
</html>

How to expand and collapse div using Angular.js

4 Answers4