AngularJSでアコーディオン(toggleボタン仕様)を1分で実装

AngularJSでアコーディオン

AngularJSでアコーディオンを実装する場合、jqLiteを使用して実装しようと考える人もいるかもしれないがjqLiteにはslideToggle()が含まれていないためjQueryのように実装することはできない。

※ちなみにtoggle()もない。（toggleClassはある）
https://docs.angularjs.org/api/ng/function/angular.element

ng-click,ng-class,CSSアニメーションで実装

ng-clickでクリックの検出および開閉(フラグ)の切り替え、ng-classでCSSクラスの追加・削除、そしてtransitionで開閉のアニメーションを追加すれば簡単に実装できる。

やり方は簡単。まず$scope.flag = false;で初期フラグを設定する。

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

HTMLの方にはクリックする箇所にng-click="flag =! flag"を付ける。
開閉部分にはng-class="{hide: flag}"を付ける。

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

そして開閉のアニメーションを実装するためにtransitionを追加する。今回は簡単に実装するために単純に開いている時の高さ(height: 100px;)と閉じている高さ(height: 0)を設定する。

.accordion dd {
  overflow: hidden;
  height: 100px;
  -webkit-transition: height 0.5s ease;
  transition: height 0.5s ease;
}
.accordion dd.hide {
  height: 0;
}

AngularJSでアコーディオン(toggleボタン仕様)のサンプル