クリックできる範囲

テキストが入ります。テキストが入ります。テキストが入ります。テキストが入ります。

<dl class="accordion">
  <dt ng-click="flag = !flag">クリックできる範囲</dt>
  <dd ng-class="{hide: flag}">テキストが入ります。テキストが入ります。テキストが入ります。</dd>
</dl>

.accordion,
.accordion dt,
.accordion dd {
  margin: 0;
  padding: 0;
}
.accordion {
  width: 300px;
  margin-bottom: 10px;
  border: 1px solid #CCC;
}
.accordion dt {
  padding: 5px 10px;
}
.accordion dt {
  background-color: #EEE;
  cursor: pointer;
}
.accordion dd {
  overflow: hidden;
  height: 100px;
  -webkit-transition: height 0.5s ease;
  transition: height 0.5s ease;
}
.accordion dd.hide {
  height: 0;
}

angular.module('myApp', [])
  .controller('Ctrl', ['$scope', function ($scope) {
    $scope.flag = false;
  }]);