BootstrapとjQueryで要素の表示・非表示を切り替えてインタラクティブなWebページを作る

2024-05-20

Twitter Bootstrap で要素を非表示にし、jQuery で表示する方法

このチュートリアルでは、Twitter Bootstrapを使用して要素を非表示にし、jQueryを使用して要素を表示する方法を説明します。この方法は、Webページ上の要素を動的に表示したり非表示したりする必要がある場合に役立ちます。

必要なもの

HTML ファイル
Bootstrap CSS
jQuery ライブラリ

手順

要素を非表示にする

Bootstrapを使用して要素を非表示にするには、d-none クラスを使用します。このクラスは、すべての画面サイズで要素を非表示にします。
```
<div class="d-none my-element">
    </div>
```
jQueryを使用して要素を表示するには、show() メソッドを使用します。このメソッドは、要素を可視状態にします。
```
$(document).ready(function() {
    $(".my-element").show();
});
```

例

次の例では、ボタンをクリックすると要素が表示される方法を示します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootstrapとjQueryで要素を表示/非表示</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div class="d-none my-element">
            <h1>要素が表示されました！</h1>
        </div>
        <button class="btn btn-primary">要素を表示</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-cca7st5j82YjYf3zqz20UEWYA/kMX5jKChuRZj7vQ7j762aWyR4MEqYLlFBNrI" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $(".btn-primary").click(function() {
                $(".my-element").show();
            });
        });
    </script>
</body>
</html>

この例では、ボタンをクリックすると、my-element クラスの要素が表示されます。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BootstrapとjQueryで要素を表示/非表示</title>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <div id="my-element" class="d-none my-element">
            <h1>要素が表示されました！</h1>
        </div>
        <button class="btn btn-primary">要素を表示</button>
        <button class="btn btn-secondary">要素を非表示</button>
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha384-cca7st5j82YjYf3zqz20UEWYA/kMX5jKChuRZj7vQ7j762aWyR4MEqYLlFBNrI" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function() {
            $(".btn-primary").click(function() {
                $("#my-element").show();
            });
            $(".btn-secondary").click(function() {
                $("#my-element").hide();
            });
        });
    </script>
</body>
</html>

説明

このコードは以下の通り動作します。

HTML部分では、非表示にしたい要素をid="my-element"とclass="d-none my-element"を使って定義します。
JavaScript部分では、jQueryを使ってボタンのクリックイベントを処理します。
btn-primaryボタンがクリックされると、$("#my-element").show();を実行し、my-element要素を表示します。

ポイント

要素のIDやクラス名は、自由に設定できます。
ボタンのテキストやスタイルも、自由に設定できます。
jQueryのメソッド以外にも、様々なアニメーションライブラリを使って要素の表示・非表示にアニメーションを追加できます。

このサンプルコードを参考に、自分のWebサイトに合った要素の表示・非表示機能を実装してみてください。

BootstrapとjQuery以外にも、要素を表示・非表示を切り替える方法はいくつかあります。以下に、代表的な方法をいくつかご紹介します。

CSSのみで要素を表示・非表示を切り替えるには、displayプロパティを使用します。

.my-element {
  display: none; /* 要素を非表示にする */
}

.my-element.show {
  display: block; /* 要素を表示する */
}

この方法の利点は、シンプルでわかりやすいことです。欠点は、JavaScriptを使用しないため、動的な表示・非表示には向いていないことです。

JavaScriptのみで要素を表示・非表示を切り替えるには、document.getElementById() や document.querySelector() などのメソッドを使用して要素を取得し、style.displayプロパティを操作します。

const myElement = document.getElementById('my-element');

function showElement() {
  myElement.style.display = 'block';
}

function hideElement() {
  myElement.style.display = 'none';
}