【HTML・CSS・javascript】jQueryを使わずにslideToggleを使いたい
jQueryも最近は使う機会がめっきり減ったなと思う今日この頃です。
jQueryが便利だったなーと思うことは色々あるのですが、特に便利だった物の一つに「slideToggle()」があったと思います。
当時、無駄にパカパカしたメニューを作った覚えはありませんか?
あのメニューです。
jQueryだとslideToggleの一文でアコーディオンメニューが出来たのですが、jQuery無しの場合だとちょっとだけ沢山コードを書くことになります。
HTML
<button type="button" id="button" class="button">
OPEN
</button>
<div id="slide" class="slide">
<div id="slideItem" class="box">
<p>この部分がアコーディオンします</p>
<p>この部分がアコーディオンします</p>
<p>この部分がアコーディオンします</p>
<p>この部分がアコーディオンします</p>
<p>この部分がアコーディオンします</p>
<p>この部分がアコーディオンします</p>
</div>
</div>
CSS
.box {
width:300px;
padding:1rem;
background:#ccc;
}
.slide {
position:absolute;
height:0;
overflow:hidden;
transition:all 1s;
}
javascript
window.onload = function () {
const boxheight = document.getElementById("slideItem").clientHeight;
let flug = false;
document.getElementById("button").addEventListener(
"click",
function () {
flug = !flug
if (flug) {
document.getElementById("slide").style.height = boxheight + "px";
} else {
document.getElementById("slide").style.height = 0 + "px";
}
},
false
);
}
動作の説明
HTMLはbuttonを押したらその下のid="slide"のdivがスライドする予定で作っています。
まずはスライドさせる前に閉じさせたいので、cssでスライドさせるdivの高さを0にして、overflow:hiddenで中身を隠すようにします。これで準備完了です。
javascriptはjQueryを使わない前提で話をしているのでバニラで記載します。
まず、.clientHeightを使ってdivの中身の高さを取得します。それと同時にボタンを押したらアコーディオンの開閉をさせたいので、フラグとなる変数も用意します。
今回はロード完了時に1回取得するだけにしています。
もしも、アコーディオンの中身が動的に変わるようであれば、ボタンを押す毎に取得するようにしてください。
アコーディオンの開閉はごくごく簡単な仕組みで動かしています。
ボタンを押したらスライドさせるdivに中身と同じheightの数値を与えるだけです。先程指定したslideの中に、transitionを入れておけば、動きがアニメーションになります。
ボタンを押す毎にtrueとfalseが交互に切り替わるようになっています。これでdivのheightを切り替えています。
仕組みがわかれば特に難しくないので、jQueryが使えないけどアコーディオンメニューが使いたいときなどにちょっとこれを思い出してみてください。
今回は単純に1個だけのアコーディオンメニューをサンプルで作っただけですが、これをベースに色々改良していただければ、もっといい感じのものが出来ると思います。
この記事が気に入ったらサポートをしてみませんか?