JavaScript

やさしい説明

「ある属性をつけたり消したりできる魔法のスイッチ」です。

ボタンを押すたびに、hidden や disabled のような属性を「ON／OFF」できる便利な関数です。

正確な説明

toggleAttribute() は、HTML要素に指定した属性が「ある／ない」を自動で切り替えるメソッドです。

• 属性がなければ追加されます。
• 属性がすでにあれば削除されます。

つまり、ひとつのメソッドで「付ける」も「外す」もできます。

また、2つ目の引数に true や false を渡すと、「明示的に追加」「明示的に削除」もできます。

使いどころ

• メニューを開閉したいときに aria-expanded を切り替える
• 画像やボタンを一時的に非表示にしたいときに hidden を切り替える
• 入力欄を有効／無効にしたいときに disabled を切り替える

など、UIの状態をトグルしたい場面でよく使われます。

サンプルコード（基本形）

こう書けばOKです

<button id="btn">切り替え</button>
<p id="text">こんにちは！</p>

<script>
	<!-- JavaScript code here -->
</script>

const btn = document.getElementById("btn");
const text = document.getElementById("text");

btn.addEventListener("click", () => {
	// hidden 属性をつけたり外したり
	text.toggleAttribute("hidden");
});

クリックするたびに、hidden 属性が「ON／OFF」され、<p>が表示されたり消えたりします。

サンプルコード（2つ目の引数あり）

text.toggleAttribute("hidden", true);  // 強制的に追加
text.toggleAttribute("hidden", false); // 強制的に削除

ポイントまとめ

• ひとつのメソッドで属性をON/OFFできる
• 2つ目の引数で「明示的に追加・削除」も可能
• クラスではなく「属性」を操作したいときに使う