クリックで要素をトグル表示させる方法｜JavaScriptで簡単に開閉メニューを作る

クリックしたときに任意の要素だけを「ふわっと」表示/非表示にする方法を紹介します。JavaScript を少し追加するだけで、ショートコードの内部や固定ページでも使える便利なUIが作れます。

1 実装のポイント

• クリックで要素を slideToggle 風に開閉
• jQuery なし（JavaScriptのみでOK）
• 複数のトグルを置いても干渉せず動く
• 汎用CSSを貼るだけで美しい開閉ボックスになる

<!-- ▼ クリックで要素をトグル表示するサンプルHTML ▼ -->

<div class="toggle-box">
  <button class="toggle-btn">クリックで表示/非表示</button>

  <div class="toggle-content">
    <p>ここに表示/非表示したいコンテンツを入れます。</p>
  </div>
</div>

  

2 functions.php にコードを追加

//-------------------------------------------
// クリックで任意の要素をトグル表示
//-------------------------------------------
/* トグル表示用のJSファイルを読み込む */
add_action('wp_enqueue_scripts', function() {

    wp_enqueue_script(
        'toggle-script',                       // スクリプト名
        get_stylesheet_directory_uri() . '/js/toggle.js', // 子テーマ内のJS
        array(),                                 // 依存（なし）
        '1.0',                                  // バージョン
        true                                      // footer で読み込み
    );
});
  

3 javascript にコードを追加

ファイル名：toggle.js
保存先：wp-content/themes/child-theme/js/toggle.js

document.addEventListener("DOMContentLoaded", function () {

  const toggles = document.querySelectorAll(".toggle-box");

  toggles.forEach(function (box) {
    const btn = box.querySelector(".toggle-btn");
    const content = box.querySelector(".toggle-content");

    btn.addEventListener("click", function () {
      content.classList.toggle("open");
    });
  });

});
  

3.1 ディレクトリ構造

4 汎用CSS

/* ------------------------------------------------
 * クリックで任意の要素をトグル表示
 * ---------------------------------------------- */

/* toggle-box 全体の余白 */
.toggle-box { /* */ 
  margin: 20px 0; /* 余白 */
}

/* ボタン */
.toggle-btn { 
  background: #0073aa; /* ボタン背景 */
  color: #fff; /* 文字色 */
  padding: 10px 15px; /* 余白 */
  border-radius: 6px; /* 角丸 */
  border: none; /* 枠線なし */
  cursor: pointer; /* カーソル */
  font-size: 16px; /* 文字サイズ */
  transition: 0.3s; /* hover用 */
}

/* hover時 */
.toggle-btn:hover { 
  background: #005f8a; /* 濃い青 */
}

/* 開閉するコンテンツ（初期は非表示） */
.toggle-content { 
  display: none; /* 非表示 */
  padding: 15px; /* 内側余白 */
  background: #f7f7f7; /* 背景 */
  margin-top: 10px; /* 余白 */
  border-radius: 6px; /* 角丸 */
}

/* open されたときに表示 */
.toggle-content.open { 
  display: block; /* 表示 */
}
  

5 完成イメージ

6 代用プラグイン

• Accordion Blocks（ブロックエディタ向け）
• Shortcodes Ultimate（ショートコードで展開可能）
• Collapse-O-Matic（古くからあるトグル系定番）

7 まとめ

クリックで任意の要素を表示・非表示にするだけで、
「FAQ」「詳細説明を隠す」「利用規約を折りたたむ」など、
サイトのUIが一気に使いやすくなります。

特に WordPress の記事内でも使いやすいため、
トグル表示ボックスをよく使う方はこのコードを子テーマに入れておくと便利です。