Bootstrapでhtml要素を折りたたむ|コピペで動くサンプル付き

HTMLで長い文章や説明文などが、折りたたみで表示されている事があると思います。今回はBootstrapを利用して、HTML要素を折りたたむ方法を紹介します。

Bootstrapでhtml要素を折りたたむ際のサンプルコード

以下のソースをhtmlファイルに貼り付けて、そのまま展開すれば起動します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <title>テスト折り畳み</title>
    <!--CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"/>
    <!--JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

    <style>

        /*アコーディオンの設定のためのCSS　特に必要はない */
        .accordion {
            margin-top: 50px;
        }

    </style>
</head>
<body>

<div class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h1 class="panel-title">
                <!-- ページ内リンクcollapse_test1で折りたたんでいるコンテンツとの紐付を行う -->
                <!-- a要素ではなくbutton要素でも稼働する　-->
                <a data-toggle="collapse" href="#collapse_test1">通常デザインの折り畳みコンテンツ　クリックして操作</a>
            </h1>
        </div>
        <div id="collapse_test1" class="panel-collapse collapse">
            <div class="panel-body">普通にdiv要素で文章を記載するのでも可能</div>
            折り畳み内のコンテンツはリスト要素を設定するのでも可能
            　　　
            <ul>
                <li>リスト要素１</li>
                <li>リスト要素２</li>
                <li>リスト要素３</li>
            </ul>
            　　　 <!--フッターは消去しても稼働する -->
            <div class="panel-footer">折り畳みコンテンツのフッター（消去可能）</div>
        </div>
    </div>
</div>

<div class="accordion">アコーディオン風</div>
<div class="panel-group" id="accordion">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordion1">アコーディオングループ1</a>
            </h4>
        </div>
        <div id="accordion1" class="panel-collapse collapse in">
            <div class="panel-body">class="panel-collapse collapse in"のinが設定されていれば、折り畳みコンテンツがデフォルトで表示される</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordion2">アコーディオングループ2</a>
            </h4>
        </div>
        <div id="accordion2" class="panel-collapse collapse">
            <div class="panel-body">アコーディオングループ2の内容</div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordion3">アコーディオングループ3</a>
            </h4>
        </div>
        <div id="accordion3" class="panel-collapse collapse">
            <div class="panel-body">アコーディオングループ3の内容</div>
        </div>
    </div>
</div>

</body>
</html>

コード解説

通常の折りたたみ設定について

data-toggle="collapseがbootstrapの折りたたみコンテンツの表示、非表示を制御します。ページ内リンクのcollapse_test1でボタンを押したときに表示するコンテンツを紐付ます。

 <a data-toggle="collapse" href="#collapse_test1">

また、a要素ではなくbutton要素でも設定可能です。

アコーディオン風の折り畳みについて

最上部 id="accordion"が親要素となり、

<div class="panel-group" id="accordion">

子要素（アコーディオンの選択肢）へdata-parent="#accordion"を設定し、子要素と親要素を紐付ます。

  <a data-toggle="collapse" data-parent="#accordion" href="#accordion1">アコーディオングループ1</a>

以上

その他詳細なコードの解説はhtmlのコメントをご覧ください。

htmlの要素をFlexBoxで簡単に横並びにする|サンプル付き

Bootstrapで画像スライダーを実現する|コピペで動くサンプル付き

Bootstrapでモーダルウインドウを表示する|コピペで動くサンプル付き

Bootstrapで固定ナビゲーションバーを設定する|コピペで動くサンプル付き

Bootstrapで始めるレスポンシブデザイン|コピペで動くサンプル付き

あなたにお勧めの記事

2018/05/09

AWSのLinuxサーバーでJava8を利用する

2018/05/10

Sequel PROでAWSのDBに接続する