bootstrapアコーディオンパネル

簡単。Bootstrapでアコーディオンパネルを作る方法

 

coll

Bootstrap3ではCollapseという要素を開閉するjavascriptが用意されています。 よく呼ばれているアコーディオンパネルのことです。

単純に1つのボタンを押すと指定したIDを開閉する場合と、3つのブロックのタイトルを押すとそれぞれのセクションを開閉するサンプルを紹介します。

bootstrapのjsを読み込ませておけば、Jaascriptの追加記述は不要です。

単純に1つのボタンを押すと指定したIDを開閉する場合

デモはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

HTML

data-target=の個所で開閉する対象のIDを指定します。 開閉する対象のIDにinのclass指定をするとデフォルトで開いた状態になります。

      <section>
        <h2>コンテンツを最初は非表示</h2>
        <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#sample">コンテンツを開く </button>
        <div id="sample" class="collapse">
          <div class="panel panel-default">
            <div class="panel-body">
              <h3>アコーディオンの中身</h3>
              <p>コメントコメントコメントコメントコメントコメントコメント </p>
            </div>
          </div>
        </div>
      </section>
      <hr>
      <section>
        <h2>コンテンツを最初から表示</h2>
        <button type="button" class="btn btn-primary btn-sm" data-toggle="collapse" data-target="#sample2">コンテンツを開く </button>
        <div id="sample2" class="collapse in">
          <div class="panel panel-default">
            <div class="panel-body">
              <h3>アコーディオンの中身</h3>
              <p>コメントコメントコメントコメントコメントコメントコメント </p>
            </div>
          </div>
        </div>
      </section>
      <hr>

3つのブロックをtoggleで開閉する場合

デモはこちら

⇒ライトプラン 詳細はこちら ライトプラン 詳細はこちら

HTML

3つのブロックを開閉できるようにします。 スタイルシートを加えてあげると、タイトル横のアイコンを開閉時で変えることができます。

      <section>
        <div class="panel-group" id="accordion">
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title accordion-toggle">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">セクション1 </a>
              </h4>
            </div>
            <div id="collapseOne" class="panel-collapse collapse in">
              <div class="panel-body">
                <h3>アコーディオンの中身1</h3>
                <p>コメントコメントコメントコメントコメントコメントコメント </p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title accordion-toggle">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" class="collapsed">セクション2 </a>
              </h4>
            </div>
            <div id="collapseTwo" class="panel-collapse collapse">
              <div class="panel-body">
                <h3>アコーディオンの中身2</h3>
                <p>コメントコメントコメントコメントコメントコメントコメント </p>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading">
              <h4 class="panel-title accordion-toggle">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree" class="collapsed">セクション3 </a>
              </h4>
            </div>
            <div id="collapseThree" class="panel-collapse collapse">
              <div class="panel-body">
                <h3>アコーディオンの中身3</h3>
                <p>コメントコメントコメントコメントコメントコメントコメント </p>
              </div>
            </div>
          </div>
        </div>
      </section>

CSS

    <style type="text/css">
     .panel-heading {
        cursor: pointer;
    }
     .accordion-toggle a:after {
        font-family: 'Glyphicons Halflings';
        content:"\e113";
        float: right;
        color: inherit;
    }
     .accordion-toggle a.collapsed:after {
        font-family: 'Glyphicons Halflings';
        content:"\e114";
        float: right;
        color: inherit;
    }
    </style>

 

投稿者:

kishiken

企業務めのWEBデザイナーです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です