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ボタン仕様)のサンプル