jQueryでアコーディオンを実現したい、ということはよくあると思います。
実現したいときは単純に『slideToggle』を使うのが早いです。
ただ、いろんな都合によりアコーディオンをcssの切り替え『toggleClass』で実現したいということがあるかもしれないです。
そんな時にちょっとだけ悩んだのでメモがてら書いておきます。
目次
『slideToggle』を使ったアコーディオン
まずは『slideToggle』を使ったスタンダードなアコーディオンです。cssで要素を非表示にしておいて、それをjQueryで表示・非表示の切り替えをさせます
HTML
|
1 2 |
<button class="button01">ここをクリックすると開きます</button> <p class="open01">開きました</p> |
CSS
|
1 2 3 |
.open01 { display: none; } |
jQuery
|
1 2 3 |
$(".button01").click(function () { $(this).next().slideToggle(); }); |
とりあえずよく見るアコーディオンができました。
DEMO
『toggleClass』を使ったアコーディオン（ただの表示・非表示）
次に『toggleClass』を使ってアコーディオンを作ってみます。HTML
|
1 2 |
<button class="button02">ここをクリックすると開きます</button> <p class="open02">ここが<br />アコーディオン<br />です</p> |
CSS
|
1 2 3 4 5 6 |
.open02 { display: none; } .is-open02 { display: block; } |
jQuery
|
1 2 3 |
$('.button02').click(function(){ $(this).next().toggleClass('is-open02'); }); |
『.open02』に『display: none;（非表示）』を指定して、ボタンをクリックすると『is-open02』が付与され『display: block;（表示）』となるようにしました。
DEMO
ただdisplayに対してアニメーションをつけることができないので、何とも味気ないです。
なのでアニメーションをつけられるよう調整してみます。
『toggleClass』を使ったアコーディオン（アニメーションをつけて表示・非表示）
ではアニメーションをつけられるよう調整します。先ほどの『display』は使わず『opacity』で調整します。
そしてここから問題なのですが『opacity』は『0』に指したときに見た目は消えるのですが、高さだけは残ってしまうのです。
これではアコーディオンになりません。
なので『height:0;』を使ってアニメーションさせればいいかと一瞬思ったのですが『height』にもアニメーションは効かないんですね。
これだとカクカクした変なアコーディオンになってしまいます。
じゃあどうするかというと今回は『max-height』を使います。
普通の『height』はアニメーションできないのですが『max-』や『min-』が付くとアニメーションできるんですね。
で、その時アコーディオンが開いた時の『max-height』は『auto』にしたらいい感じに表示してくれるかなと思ったのですがまったく高さを取得してくれず要素が重なりました。
なので『max-height』を今回は『1000px』に指定してみたところうまくいきました！
『1000px』の箇所は『9999px』でも何でも要素が中途半端に表示されるような状態にならないよう調整してもらえればOKです。
コードは以下になります。
HTML
|
1 2 |
<button class="button03">ここをクリックすると開きます</button> <p class="open03">ここが<br />アコーディオン<br />です</p> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.open03 { opacity: 0; max-height : 0; -webkit-transition: all 1.5s ease; -moz-transition: all 1.5s ease; transition: all 1.5s ease; } .is-open03 { opacity: 1; max-height : 1000px; -webkit-transition: all 2.5s ease; -moz-transition: all 2.5s ease; transition: all 2.5s ease; } |
jQuery
|
1 2 3 |
$('.button03').click(function(){ $(this).next().toggleClass('is-open03'); }); |
DEMO
これで『toggleClass』を使ったアニメーション付きのアコーディオンができました。
ちなみに『.open03』側につけた速度は『閉じるとき』、『.is-open03』側につけた速度は『開くとき』の指定になります。
なんとなく長くなってしまいましたが『toggleClass』を使ったアニメーション付きのアコーディオンは
・displayじゃなくてopacityを使う
・heightじゃなくてmax-heightを使う
この辺をおさえてもらえればOKです。それでは。
