<html ng-app="testApp">
  <body>
    <div ng-controller="testController">
      selected-id = {{selectedId}}<br>
      <button ng-click="addTestData()">Add test data</button><br>
      <dl>
        <dt ng-click="toggleSelected($index)" ng-repeat-start="item in items">
          {{item.name}}
        </dt>
        <dd ng-class="{'not-selected': !isSelected($index)}" ng-repeat-end>
          {{item.mail}}
        </dd>
      </dl>
    </div>
  </body>
</html>
dl {
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}

dt,dd {
  border: solid 1px black;
  text-align: left;
}

dt {
  margin: auto;
  background-color: #faf;
}

dd {
  overflow: hidden;
  margin: auto;
  background-color: #fef;
}

dd.not-selected {
  height: 0px;
  border: none;
}
angular.module('testApp', [])
    .controller('testController', function ($scope, $http) {
        $scope.items = [];

        $scope.addTestData = function () {
            $scope.items.push({name:'a', mail:'test1@example.com'})
            $scope.items.push({name:'b', mail:'test2@example.com'})
            $scope.items.push({name:'c', mail:'test3@example.com'})
            $scope.items.push({name:'d', mail:'test4@example.com'})
        };

        $scope.toggleSelected = function (index) {
            $scope.selectedId = ($scope.selectedId != index) ? index : -1;
        };

        $scope.isSelected = function (index) {
            return $scope.selectedId == index;
        }
        
        $scope.addTestData()
    });

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/angularjs/1.2.27/angular.min.js