JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

CSSとJavaScriptで作る！クリックで開閉できる折りたたみセクションの実装方法

Webサイトでよく見かける「クリックすると開閉する折りたたみセクション」。アコーディオンUIとも呼ばれるこの仕組みは、CSSと少量のJavaScriptを組み合わせるだけで簡単に実装できます。この記事では、実際に動作するサンプルコードと、その仕組みを初心者にもわかりやすく解説します。

サンプルコード（コピペでそのまま使えます）

以下のコードをHTMLファイルとして保存し、ブラウザで開けばすぐに動作を確認できます。

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
    body {
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .collapse {
        background-color: rgb(83, 186, 255);
        color: white;
        cursor: pointer;
        padding: 18px;
        width: 100%;
        border: none;
        text-align: left;
        outline: none;
        font-size: 18px;
    }
    .active, .collapse:hover {
        background-color: rgb(34, 85, 160);
    }
    .content {
        padding: 0 18px;
        display: none;
        overflow: hidden;
        background-color: #b6fdff;
        font-size: 18px;
    }
</style>
</head>
<body>
<h1>Collapsible Example</h1>
<h2>Click on the below collapsible to show the contents</h2>
<button type="button" class="collapse">Open Collapsible</button>
<div class="content">
<h3>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Optio, ducimus!
</h3>
</div>
<script>
    var collapse = document.querySelector(".collapse");
    collapse.addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        if (content.style.display === "block") {
            content.style.display = "none";
        } else {
            content.style.display = "block";
        }
    });
</script>
</body>
</html>

実行結果

上記のコードをブラウザで表示すると、まずは青いボタンだけが見えている初期状態になります。

CSSとJavaScriptで作る！クリックで開閉できる折りたたみセクションの実装方法

「Open Collapsible」ボタンをクリックすると、隠れていたコンテンツが展開されて表示されます。もう一度クリックすれば再び閉じます。

CSSとJavaScriptで作る！クリックで開閉できる折りたたみセクションの実装方法

コードのポイント解説

1. CSS：ボタンのデザインと状態の切り替え

.collapse クラスで、ボタンの基本スタイル（背景色・パディング・カーソルの形状など）を定義しています。さらに .active クラスと :hover 疑似クラスを組み合わせることで、「マウスを乗せたとき」と「クリックして開いたとき」にボタンの色が濃くなり、現在の状態がひと目でわかるようになっています。

2. JavaScript：クリックで表示・非表示を反転させる

ボタンがクリックされると、まず classList.toggle("active") でアクティブ状態の付け外しを行います。続いて nextElementSibling プロパティでボタンの直後にある .content 要素を取得し、その display スタイルが block なら none に、そうでなければ block に切り替えます。この処理により、クリックするたびに開閉が交互に切り替わる仕組みです。

応用のヒント

複数の折りたたみセクションに対応させる

querySelector の代わりに querySelectorAll を使えば、同じクラスを持つ複数の折りたたみセクションを一括で制御できます。

document.querySelectorAll(".collapse").forEach(function (btn) {
    btn.addEventListener("click", function () {
        this.classList.toggle("active");
        var content = this.nextElementSibling;
        content.style.display = content.style.display === "block" ? "none" : "block";
    });
});

もっと手軽な代替手段

JavaScriptを書きたくない場合は、HTML標準の <details> と <summary> 要素を使う方法がおすすめです。また、開閉をスムーズにアニメーションさせたいときは、max-height とCSSトランジションを組み合わせることで、より洗練された動きを実現できます。


  1. JavaScriptとCSSでドラッグ可能なHTML要素を作成する方法

    JavaScriptとCSSを組み合わせることで、マウスで掴んで自由に移動できる「ドラッグ可能なHTML要素」を簡単に実装できます。本記事では、実際に動作するサンプルコードと、その内部処理の仕組みをわかりやすく解説します。 ドラッグ可能なDIV要素のサンプルコード 以下のコードでは、position: absoluteで配置したDIV要素に対して、マウスイベント（mousedown・mousemove・mouseup）を利用してドラッグ機能を実装しています。 <!DOCTYPE html> <html> <style> body {

  2. CSSとJavaScriptでアコーディオン（開閉パネル）を作成する方法をわかりやすく解説

    CSSとJavaScriptを組み合わせることで、クリックすると内容が開閉する「アコーディオン（折りたたみパネル）」を簡単に実装できます。本記事では、実際に動作するサンプルコードをもとに、その作成手順と仕組みを詳しく解説します。 アコーディオンの実装例 以下は、HTML・CSS・JavaScriptを使ってアコーディオンを実装した完全なサンプルコードです。 <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, ini