JavaScriptでdt要素をクリックしたらアコーディオンUIが動作するように実装していきます。
- クリックイベントの実装
- dd要素の表示/非表示
- 「+」マークの変形
クリックイベントの実装
・前回JavaScriptのファイルを作ったので今回はその中身を書いていきます。
・JavaScriptは{}(波括弧)の中に書いていきましょう。
・まずdtを定数にしていきたいのでconstを使ってまとめます。
・定数名はdtが複数あるのでdtsとしておき、querySelectorAllでdtを選択します。
・こんな感じですね。
const dts = document.querySelectorAll('dt');
・次にこれらに対して処理を設定していくのでforEachを使っていきます。
・dtに対してaddEventListenerを設定して行きます。クリックしたらと書いていきます。
・処理内容はクラスを付け外しを指定しましょう。今回はddの表示/非表示の切り替えと＋マークを45度変形させバツマークをつけていきたいので現れるという意味でappearというクラス名をつけておきます。
・今回はdtの親要素であるdivに対してクラス要素を付け外ししたいのでparentNodeを使っていきます。
・こんな感じです。
dts.forEach(dt => {
dt.addEventListener('click', () => {
dt.parentNode.classList.toggle('appear');
});
dd要素の表示/非表示
・ではCSSでappearをつけた時のddの挙動を書いていきます。
・まずセレクタはdlの直下のdivにappearクラスがついたddに対してとしていきたいのでdl > div.appear ddとなります。
・次に単純に表示させたいのでdisplay: block;としていきます。
・こんな感じです。
dl > div.appear dd {
display: block;
}
「+」マークの変形
・次に＋マークを×マークにしていきます。
・CSSでappearがついたときにdt::after をコントロールしていきます。
・セレクタはdlの直下のdivにappearクラスがついていてdtの::afterに対してなのでdl > div.appear dt::after となります。
・内容は＋マークを×マークにしていきたいのでtransformプロパティを使って45度回転させていきます。
・値はrotate(45deg)ですね。
・こんな感じです。
dl > div.appear dt::after {
transform: rotate(45deg);
}