ボタンをクリックしたらボックスが表示←→非表示、とかいう動きを、とりあえずclassを付けたらとりあえず何とかなる、という発想で解決した手法。
基本形。「.btnというclassが付いたボタンをクリックしたら、.openが付いてるdivに.activeというclassを追加する」という仕組み。
▼HTMLボックス
▼JS
▼CSS
.open{display:none;}
.open.active{display:block;}
ポイントはCSSでopenはdisplay:noneで非表示にさせておいた上で、.activeが付いたらdisplay:blockにする点。
あと、classに向けて付与させるためのものか、反映させる要素にclass設定が入ってないとダメっぽい？（この場合.openのこと。#openにしてJSの指定を#openにしてもclass付与されない）
さらに、これに「.btnも色が変わる」とボタン自体にもクラスを付けた場合はこのようになる。
classの指定でもいいが、発動起点となるクリックした要素事態だからthisという指定でもOKらしい。その際は”は使わない。
$(this).toggleClass('active');
これが「3つのボタン＆3つのboxの開閉」となったらclassを変えて設置する。（HTMLとCSSの内容は書くのが面倒なので各自対応で）
ただ、上記の内容だとbtn01をクリックしbtn02をクリックすると、box1とbox2が同じ画面にあることになる。これはtoggleClassはclassを付け外しする命令のため、もう一度ボタンを押さないとクラスが外れないため。そこでクラスを付ける・外すだけの命令もある。
toggleClass・・・クリックするたびにクラスを付ける・外すを繰り返す addClass・・・クラスを付ける removeClass・・・クラスを外す
addClassでクラスを付けたらクラスはそのままになるので、クラスを消す処理が必要な場合はremoveClassで確実に外す処理が必要となる。
「画面には1つのboxだけが表示されて出し入れされる」というサンプルは以下の通りとなる。
めんどくさっ！
toggleClassではなくaddClassとremoveClassを組み合わせて、一つのボタンをクリックしたら他の要素からremoveClassでactiveを外す、という命令にすると対応可能、というわけ。
もっとスクリプトで高度なやり方がありそうだが、手持ちの武器でできる簡単な実装はこんな感じとなる。
ここまでは「クリックしたら」だったが、発動処理を「マウスオーバーしたら」にすることも可能。
あとおまけ。display:block、noneだとパッと開いちゃうので、これを少々アニメっぽく動く縦の拡縮にすることもできる。
.box{
max-height: 0;
overflow-y: hidden;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.box.active{
max-height:1000px;
-webkit-transition: all 0.8s;
-moz-transition: all 0.8s;
-ms-transition: all 0.8s;
-o-transition: all 0.8s;
transition: all 0.8s;
}
つまり、max-heightの高さに加えてtransitionでアニメっぽく見せている処理にしちゃうわけですな。
これも気を付けないといけないのは、.boxに上下のpaddingとか使っちゃうとそのスペース分だけ画面に残ってしまうので、.boxの内部要素で上下のスペースを取る工夫あり。
横の拡縮とかも出来そうなので、そこは各自工夫で。