【Bootstrap】Bootstrap3でアコーディオン

Yukimi Sato 1,199views 更新:2015年8月13日

BootstrapCDNFont−AwesomeCDNを使って実装します。

Bootstrap3でアイコン付アコーディオン(Collapse)を使用するを参考にさせていただきました。

HTML

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Bootstrapでアコーディオン</title>
  <!-- Latest compiled and minified CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <!-- Latest compiled and minified JavaScript -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
  <script>
    $(function(){
      $('#collapseOne, #collapseTwo, #collapseThree')
      .on('show.bs.collapse', function(){ //< 折り畳み開く処理
        $('a[href="#' + $(this).attr('id') + '"]').find('span.glyphicon-collapse-down')
        .removeClass('glyphicon-collapse-down').addClass('glyphicon-collapse-up');
      })
      .on('hide.bs.collapse', function(){ //< 折り畳み閉じる処理
        $('a[href="#' + $(this).attr('id') + '"]').find('span.glyphicon-collapse-up')
        .removeClass('glyphicon-collapse-up').addClass('glyphicon-collapse-down');
      });
    });
  </script>
</head>
<body>
<div class="container">
<h1>メイン・タイトル</h1>
  <p>テキストテキストテキストテキストテキストテキスト</p>

  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
            <span>折りたたみグループアイテム折りたたみグループアイテム折りたたみグループアイテム #1</span>
            <i class="fa fa-chevron-down"></i>
          </a>
        </h2>
      </div>
      <div id="collapseOne" class="panel-collapse collapse">
        <div class="panel-body">1個目の内容
        <ul class="list">
          <li>リスト</li>
          <li>リスト</li>
          <li>リスト</li>
        </ul>
          <ol>
            <li>リスト</li>
            <li>リスト</li>
            <li>リスト</li>
          </ol>
          <table class="table table-bordered">
            <tbody>
            <tr>
              <th>th</th>
              <td>td</td>
            </tr>
            <tr>
              <th>th</th>
              <td>td</td>
            </tr>
            <tr>
              <th>th</th>
              <td>td</td>
            </tr>
            </tbody>
          </table>
          <h3>タイトルH3</h3>
          テキストテキストテキストテキストテキストテキスト<br>
          テキストテキストテキストテキストテキストテキスト
          <h4>タイトルH4</h4>
          テキストテキストテキストテキストテキストテキスト<br>
          テキストテキストテキストテキストテキストテキスト
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
            <span>折りたたみグループアイテム #2</span>
            <i class="fa fa-chevron-down"></i>
          </a>
        </h2>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">2個目の内容</div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h2 class="panel-title">
          <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
            <span>折りたたみグループアイテム #3</span>
            <i class="fa fa-chevron-down"></i>
          </a>
        </h2>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">3個目の内容</div>
      </div>
    </div>
  </div>

</body>
</html>

HTMLはまるっと貼り付ければこれだけで実装が完了します。

ログイン / 新規登録してコメントする

このソースコードをストックして後で利用したり、作業に利用したソースコードをまとめることができます。

こちらもお役に立つかもしれません