JavaScriptで要素の表示・非表示を切り替える方法は、メニューや説明文、FAQの回答欄など、さまざまな場面でよく使います。実装の基本はシンプルで、クリックなどの操作をきっかけにクラスを付け外しし、CSS側で表示状態を切り替えるのが定番です。
toggleで表示・非表示を切り替える基本
JavaScriptには、クラスの有無を切り替えるためのclassList.toggle()があります。これを使うと、要素に付いているクラスを「付ける」「外す」の両方を1行で書けます。表示・非表示の切り替えでは、たとえばis-hiddenのようなクラスを用意し、CSSで非表示状態を定義しておく方法が分かりやすいです。
<button id="toggleButton" type="button">表示/非表示を切り替える</button>
<div id="target" class="box">
この要素が切り替わります。
</div>
<style>
.box {
padding: 16px;
background: #f2f2f2;
margin-top: 12px;
}
.is-hidden {
display: none;
}
</style>
<script>
const button = document.getElementById('toggleButton');
const target = document.getElementById('target');
button.addEventListener('click', () => {
target.classList.toggle('is-hidden');
});
</script>この例では、ボタンを押すたびにis-hiddenクラスが付いたり外れたりします。CSSのdisplay: none;によって、クラスが付いている間は要素が非表示になります。JavaScript側で直接style.displayを書き換える方法もありますが、見た目の管理をCSSに分けられるため、クラス操作のほうが扱いやすいです。
表示状態を見て文言も切り替える
実際のUIでは、表示・非表示だけでなくボタンの文言も変えたいことがあります。たとえば「開く」「閉じる」を切り替えると、ユーザーに状態が伝わりやすくなります。以下のように、クラスの状態を確認して文字列を書き換えると実用的です。
<button id="toggleButton2" type="button">開く</button>
<div id="target2" class="box is-hidden">
詳細内容がここに入ります。
</div>
<script>
const button2 = document.getElementById('toggleButton2');
const target2 = document.getElementById('target2');
button2.addEventListener('click', () => {
const isHidden = target2.classList.toggle('is-hidden');
button2.textContent = isHidden ? '開く' : '閉じる';
});
</script>classList.toggle()は、クラスを追加したか削除したかをtrueまたはfalseで返します。ここでは、その値を使ってボタンの文言を切り替えています。状態と表示をそろえておくと、操作中の混乱を減らせます。
styleを書き換える方法との違い
簡単な処理なら、JavaScriptでelement.style.display = 'none'のように直接指定することもできます。ただし、この方法は「今の表示状態」をJavaScript側で管理しなければならず、記述が増えやすいです。クラスを切り替える方法なら、見た目はCSS、動きはJavaScriptと役割分担できるので、後から調整しやすくなります。
// 直接styleを変更する例
const el = document.getElementById('target');
if (el.style.display === 'none') {
el.style.display = 'block';
} else {
el.style.display = 'none';
}この書き方でも動きますが、初期値がCSSで設定されている場合は判定が分かりにくくなることがあります。初心者が表示・非表示を切り替える実装を覚えるなら、まずはclassList.toggle()を使う方法をおすすめします。
実装時に押さえておきたいポイント
- 非表示は
display: none;で制御するのが基本です。 - JavaScriptでは要素そのものを消すのではなく、クラスの付け外しで切り替えると管理しやすくなります。
- 複数の要素を切り替える場合は、
querySelectorAll()でまとめて扱う方法もあります。 - アニメーションを付けたい場合は、
displayだけでなくopacityやmax-heightを使う方法もあります。
表示・非表示の切り替えは、JavaScriptの中でも基本的で、いろいろな機能に応用しやすい実装です。まずはクラスを1つ切り替える形で理解し、必要に応じてボタン文言の変更やアニメーションを追加していくと、実用的なUIを作りやすくなります。
