CSS HTML Javascript

クリックイベントの設定

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);

}

-CSS, HTML, Javascript