Vanilla JS(JavaScript)を使用して、ボタンをクリックしたとき、指定の要素にclass追加・削除する方法を紹介します。
よくQ&Aなんかで見かける質問文をクリックすると回答が出てくる仕様なんかに使えます!
ボタンクリックで指定の要素にclass追加・削除する
まず今回使用するHTMLを用意します。
<button class="js-btn">ボタン</button>
<div class="content">コンテンツが入ります。</div>
続いてCSS。
非表示・表示のみの簡単なものにしていますが、必要に応じてアニメーションなどをつけてください。
.content{
display: none;
}
.content.js-active{
display: block;
}
今回メインのJavaScript。
「querySelector」で、ボタンと表示する部分を取得して使います。
const content = document.querySelector(".content");
const btn = document.querySelector(".js-btn");
btn.addEventListener("click", () => {
content.classList.toggle("js-active");
});
ABOUT ME