【JavaScript】クリックで表示/非表示

2025年2月16日

URLをコピーしました！

こんにちはrey( @reydesign8376) です
都内の勤務生活を辞めてWebデザイナーに。今は趣味のサーフィンなどしながら海沿いでのんびり暮らしています。

Webサイトでよくある「クリックでメニューを開閉する」機能を、シンプルなJavaScriptで実装する方法を紹介します。

コード内容

HTML構造

<button class="toggle_btn">メニュー</button>
<div class="menu">ここにメニューの内容</div>

CSS

CSSはスタイルの設定のほかに.openしたらどうなるかを設定します。

.menu {
    display: none; /* 初期状態は非表示 */
    background: #f0f0f0;
    padding: 10px;
    border: 1px solid #ccc;
    transition:
        opacity 0.3s ease-in-out,
        transform 0.3s ease-in-out;
    transform: translateY(-10px); /* 初期位置を少し上に */
}
.menu.open {
    display: block; /* クラスが追加されたら表示 */
    transform: translateY(0); /* 開いたときに少し下にずれる */
}

JavaScript

クリックで開閉する動きを作ります。

document.addEventListener("DOMContentLoaded", function () {
    const button = document.querySelector(".toggle_btn");
    const menu = document.querySelector(".menu");

    button.addEventListener("click", function () {
        menu.classList.toggle("open");
        if (menu.classList.contains("open")) {
            menu.scrollIntoView({
                behavior: "smooth",
                block: "start"
            });
        }
    });
});

実装のポイント

.toggle() メソッドを使うことで、クリックするたびに open クラスの追加・削除が行われる。
CSS で display: none; を設定し、.open クラスが追加されたときに表示させる。
transition を使ってアニメーションを加えると、より自然な動きに。

応用編

フェードイン/アウトでの開閉

以下のように CSS を変更すれば、フェードアニメーション付きで開閉できます。

.menu {
    opacity: 0;
    transform: translateY(-10px) scale(0.95);
    transition: opacity 0.3s ease, transform 0.3s ease;
    visibility: hidden;
}
.menu.open {
    opacity: 1;
    transform: translateY(0) scale(1);
    visibility: visible;
}

この方法なら、表示・非表示の切り替えがスムーズになり、より洗練されたUIになります！

このように、シンプルなコードでもクリックで表示・非表示を簡単に実装できます。

ぜひ参考に！
ではまた〜👋