Classを付け替えるJavaScript

ユーザーのアクションによってスタイルなどを変更する場合に、JavaScriptを使ってClassの付け替えによってスタイルを変更する場合のソースコードになります。

JavaScriptでの実装

let toggleBtn = document.querySelectorAll('.btn');

toggleBtn.forEach( element => {
  element.addEventListener('click', event => {

    //クリック要素のclassの付け替え
    event.target.classList.toggle('is-shown');

    //兄弟要素のclassの付け替え
    e.target.nextElementSibling.classList.toggle('is-shown');

  });
});

ユーザが操作するよう要素に class="btn" が設定されているとして、
1行目では対象の要素を取得します。

要素が複数ある場合は、document.querySelectorAll() を使います。
要素が1つしかない場合は document.querySelector() でも取得可能です。

3行目では、 forEach を使って取得した全ての要素に対しての処理を記述します。

4行目では class="btn" を持つ要素に、クリックイベントの動作を登録します。

7行目で「クリックした要素（class=”btn” を持つ要素）」自体のClassの付け替えを行います。
.classList.toggle('付け替えたいClass名') でクリックするごとに指定したClass名を付ける・外すを行います。

10行目では .nextElementSibling を使って、クリックされた要素の次の兄弟要素を取得し
その要素に対してもClassの付け替えを行います。

jQueryでの実装

同じ挙動をjQueryで書く場合の例です。

let toggleBtn = $('.btn');

toggleBtn.on('click', event => {
  $(event.target).toggleClass('is-shown');
  $(event.target).next('.answer').toggleClass('is-shown');
});

1行目では対象の要素を取得します。

3行目は、取得した要素に対してイベントリスナーを登録します。

4行目では「クリックした要素（class=”btn” を持つ要素）」自体のClassの付け替えを行います。

5行目はクリックされた要素の次の兄弟要素を取得し、その要素に対してもClassの付け替えを行います。