A hands-on page that shows how one button can toggle states—like show/hide, color, or expand/collapse—using classList.toggle and toggleAttribute with short, beginner-friendly examples.
JavaScript の toggle は、「ある状態をオン・オフ切り替えるスイッチ」のようなものです。
たとえば、ボタンをクリックすると文字が出たり消えたりする、背景の色が変わったり戻ったりする、といった仕組みを作るときに便利です。
classList.toggle("クラス名") を使えば、指定したクラスを「つける／はずす」を自動で切り替えてくれるので、コードを短くシンプルにできます。
自分で「もし〜なら追加、そうでなければ削除」と書くよりも、toggle を使えば一行で完結できます。
イメージとしては、電気のスイッチを「カチッ」と押して、ついたり消えたりするのと同じです。
見た目の切替は「非表示用クラス」を付け外しするのがコツです。
HTML
<button id="jsToggleDemoBtn1" class="jsToggleDemoBtn" type="button">表示/非表示</button>
<div id="jsToggleDemoBox1" class="jsToggleDemoBox">Hello!（基本サンプル）</div>CSS
.jsToggleDemoIsHidden {
opacity: 0;
visibility: hidden;
}JavaScript
(function () {
const btn = document.getElementById("jsToggleDemoBtn1");
const box = document.getElementById("jsToggleDemoBox1");
if (btn && box) {
btn.addEventListener("click", () => {
const isHiddenNow = box.classList.toggle("jsToggleDemoIsHidden");
btn.textContent = isHiddenNow ? "表示する" : "隠す";
});
}
}());aria-expanded と toggleAttribute を同期「開いている/閉じている」を属性で表現。見た目はCSS、状態はARIA属性で伝える。
HTML
<button id="jsToggleDemoAccBtn"
class="jsToggleDemoBtn"
type="button"
aria-expanded="false"
aria-controls="jsToggleDemoAccPanel">
詳細を表示
</button>
<div id="jsToggleDemoAccPanel" class="jsToggleDemoAccordionPanel" hidden>
ここに詳細テキスト（aria連動アコーディオンのサンプル）
</div>JavaScript
(function () {
const accBtn = document.getElementById("jsToggleDemoAccBtn");
const accPanel = document.getElementById("jsToggleDemoAccPanel");
if (accBtn && accPanel) {
accBtn.addEventListener("click", () => {
const expanded = accBtn.getAttribute("aria-expanded") === "true";
// ボタンの状態を反転して反映
accBtn.setAttribute("aria-expanded", String(!expanded));
// パネルの表示/非表示は hidden 属性で制御
accPanel.toggleAttribute("hidden", expanded);
// ボタンの文言も同期
accBtn.textContent = expanded ? "詳細を表示" : "詳細を隠す";
});
}
}());classList.toggle と toggleAttribute の違いは？hidden, aria-*）を付け外します。見た目はクラスで、状態は属性で表すと整理しやすいです。force はいつ使う？true なら必ず追加、false なら必ず削除。「チェックONなら暗色テーマ」など。const isOn = element.classList.toggle("active"); の戻り値で分かります。true なら付いた、false なら外れた、です。display: none を直接いじるのはダメ？aria-pressed、開閉ボタンは aria-expanded を使い、クリック時に値を同期させましょう。