title: Expand and collapse with angular js
body: <p>I am trying to figure out a way to do an expand and collapse using angular js. I haven't been able to find an elegant way to do this without manipulating dom objects in the controller (which is not the angular way). Currently I have a nice way to do it for a one layer expand and collapse. However when I start nesting, things get complicated and don't work the way I want it to (expanding and collapsing multiple areas when they shouldn't be). The problem comes in by me not knowing how to send a unique identifier with an ng-click to only expand/collapse the right content. I should mention that these items are in an ng-repeat so I can necessarily customize parameters being sent.</p>
  
  <p>I was able to use this <a href="http://jsfiddle.net/rur_d/tNZAm/" rel="noreferrer">jsfiddle</a> to help me get a one layer expand and collapse to work. However this is a toggle way to do it and I want the user to be able to keep things expanded while expanding others. So what I did to fix this was use an array of and every time something is clicked the index of that clicked item would be added to the array and the class expanded. When the user clicked again the index was removed from the array and the area was collapsed.</p>
  
  <p>Another way I found that you can do it is by using directives. But I can't really find any exampled to wrap my head around how directives work. I am not sure how to even start when it comes to writing directives.</p>
  
  <p>My current set up is this:</p>
  
  <pre><code>function Dexspander($scope) {
      $scope.ExpandArray = [];
  
      //Push or pop necessary elements for tracking
      $scope.DespopulatArray = function (identifier, element) {
      if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
              $scope.ExpandArray.splice(_.indexOf($scope.ExpandArray, identifier + element), 1);
          } else {
              $scope.ExpandArray.push(identifier + element);
          }
      }
  
      //Change class of necessary elements
      $scope.Dexspand = function (identifier, element) {
          if (_.indexOf($scope.ExpandArray, identifier + element) != -1) {
              return "expand";
          } else {
              return "collapse";
          }
      }
  }
  
  &lt;div class="user-header" ng-repeat="user in users"&gt;
      &lt;h1 ng-click="DespopulatArray('user', $index)"&gt;Expand&lt;/h1&gt;
  &lt;/div&gt;
  &lt;div class="user-content" ng:class="Dexspand('user', $index)"&gt;
      &lt;div class="content"&gt;
          &lt;div class="user-information"&gt;
              &lt;div class="info-header"&gt;
                  &lt;h1 ng-click="DespopulatArray('info', $index)&gt;Some Information&lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="info-contents" ng:class="Dexspand('info', $index)"&gt;
                  stuff stuff stuff stuff...
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The issue with this setup is that if I have to parent divs expanded and those both have something under them to expand, clicking the expand text will expand them in both areas as they are not unique.</p>