【JavaScript】クリックするとそれに対応した要素を出現させる

というわけで今回は、クリックするボタンに対応した要素を出現させる方法をご紹介します。

クリックするとそれに対応した要素を出現させる

まずはさっそく完成品を見てみましょう！

See the Pen クリックするとそれに対応した要素を出現させる by そす (@Sosgoyo) on CodePen.

①②③それぞれのボタンをクリックすると
それに応対した「壱」「弐」「参」と書かれた要素を出現させています。

では「HTML」「CSS」「JavaScript」の順で説明していきます！

HTMLのポイント

HTMLでのポイントは「data属性」と「id」の設定です。
さっそくコードを抜粋して見てみます。

【HTML】
<button class="btn is-switch" data-index='1'>①</button>
<button class="btn" data-index='2'>②</button>
<button class="btn" data-index='3'>③</button>

<div class="box is-switch" id='list-1'>壱</div>
<div class="box" id='list-2'>弐</div>
<div class="box" id='list-3'>参</div>

まずはボタン要素。
①②③それぞれのボタンに対して「data属性」を付与しております。
「data属性」に関しては下記記事をご覧ください。

【HTML】「data属性」を使用してサブタイトルを付ける

今回は「data-index」と名付けて各ボタンに付与しております。(data-○○ なら名前は何でもOKです)

そして、出現させたい要素にはそれぞれ「id」を付けております。
id名に関しては、好きな名前　＋　 data-indexで振り分けた値を命名してください。
今回の例で言うと、

data-index=’1’　⇒　id=’list-1′
data-index=’2’　⇒　id=’list-2′
data-index=’3’　⇒　id=’list-3′

idの前半部分の「list」は好きな名前で構いません。その先に「data属性」で指定した
値をそれぞれの要素に振り分けるようにしてください。

あとは、①と「壱」は最初に表示させたいため、事前に「is-switch」クラスを付けておきます。

CSSのポイント

CSSはそこまで特別なことはしておりません。
後ほど、JavaScriptでクラスの付け外しを行うのでその下準備するだけです。

今回は「.is-switch」クラスの付け外しをしております。

【CSS】
.btn {
  font-size: 50px;
  cursor: pointer;
}

.btn.is-switch {
 color: red;
}

.box {
  display: none;
  margin-inline: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
  width: 100px;
  height:100px;
  font-size: 50px;
  background-color: lightblue;
}

.box.is-switch {
  display: flex;
}

「.btn」に関しては、「.is-switch」を付けて色を変えております。
「.box」に関しては、「display」プロパティを「none」⇒「flex」にしております。
（flexにしているのは、テキスト縦横中央表示にしたかったからです。）

JavaScriptのポイント

まずはコードを見てみましょう。

【JavaScript】

// 全てのボタンを取得
const buttons = document.querySelectorAll('.btn');

buttons.forEach((button) => {
    button.addEventListener('click', () => {
        // ボタンの data-index 属性から番号を取得
        const index = button.getAttribute('data-index');

        // 対応する要素を取得
        const targetBusiness = document.getElementById(`list-${index}`);

        // 対応する要素に is-switch クラスが既に付いている場合は処理を終了
        if (targetBusiness.classList.contains('is-switch')) {
            return; // 何もせずに終了
        }

        // 既存の is-switch クラスをすべての要素から削除（要素とボタン両方から削除）
        document.querySelectorAll('.is-switch').forEach(element => {
            element.classList.remove('is-switch');
        });

        // クリックされたボタンに対応する要素に is-switch クラスを追加
        targetBusiness.classList.add('is-switch');

        // クリックされたボタン自体にも is-switch クラスを追加
        button.classList.add('is-switch');
    });
});

では分解して一つずつ見ていきましょう。

const buttons = document.querySelectorAll('.btn');

これは、「.btn」の要素を全て取得して「buttons」という変数に格納しております。
このあと、「foreach」を使用して各ボタンのイベントを設定します。

const index = button.getAttribute('data-index');
const targetBusiness = document.getElementById(`list-${index}`);

「getAttribute」は指定した要素の属性を取得します。
今回はdata属性に数字を割り当てているので、それぞれの数字を取得して、
「index」という変数に格納しております。

「getElementById」はHTMLで指定したID値を持つHTML要素を取得するメソッドです。
今回は、「list-${index}」というID値を指定しています。
「index」には先程、「getAttribute」で取得したdata属性の値が格納されているので
それぞれ「list-1」「list-2」「list-3」を取得することになります。

そして「targetBusiness」という変数にそれぞれ格納しております。
変数名は何でも良いです。

// 対応する要素に is-switch クラスが既に付いている場合は処理を終了
        if (targetBusiness.classList.contains('is-switch')) {
            return; // 何もせずに終了
        }

        // 既存の is-switch クラスをすべての要素から削除（要素とボタン両方から削除）
        document.querySelectorAll('.is-switch').forEach(element => {
            element.classList.remove('is-switch');
        });

        // クリックされたボタンに対応する要素に is-switch クラスを追加
        targetBusiness.classList.add('is-switch');

        // クリックされたボタン自体にも is-switch クラスを追加
        button.classList.add('is-switch');

あとは、「.is-switch」のクラスの付け外しとそれぞれの要素に行っています。

if (targetBusiness.classList.contains('is-switch')) {
            return; // 何もせずに終了
   }

こちらはすでに「.is-switch」が付いているボタンをクリックしても何もイベントが発火しないようにしています。

もう一度完成品を添付しておきましょう。

See the Pen クリックするとそれに対応した要素を出現させる by そす (@Sosgoyo) on CodePen.

まとめ

というわけで今回は、クリックするボタンに対応した要素を出現させる方法をご紹介しました。
是非ご活用くださいませ！