SyntaxHighlighterで表示 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>024-1</title>
    <link href="bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
    </header>

    <div class="container">
      <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3">
        </div><!-- col-3 -->

        <!-- メインコンテンツ -->
        <div class="col-xs-6 col-sm-6 col-md-6">

          <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="#collapse11">
                    アコーディオン #1
                  </a>
                </h4>
              </div>
              <div id="collapse11" class="panel-collapse collapse in">
                <div class="panel-body">
                  <p>
                  アコーディオン #1<br>アコーディオン #1<br>
                  アコーディオン #1<br>アコーディオン #1
                  </p>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="#collapse12">
                    アコーディオン #2
                  </a>
                </h4>
              </div>
              <div id="collapse12" class="panel-collapse collapse">
                <div class="panel-body">
                  <p>
                  アコーディオン #2<br>アコーディオン #2<br>
                  アコーディオン #2<br>アコーディオン #2
                  </p>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="#collapse13">
                    アコーディオン #3
                  </a>
                </h4>
              </div>
              <div id="collapse13" class="panel-collapse collapse">
                <div class="panel-body">
                  <p>
                  アコーディオン #3<br>アコーディオン #3<br>
                  アコーディオン #3<br>アコーディオン #3
                  </p>
                </div>
              </div>
            </div>
          </div><!-- panel-group -->

        </div><!-- col-6 -->
        <div class="col-xs-3 col-sm-3 col-md-3">
        </div><!-- col-3 -->
      </div><!-- row -->
    </div><!-- container -->

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </body>
</html>

Collapseで表示(024-1.html) 

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <!--[if IE]>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <![endif]-->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>024-1</title>
    <link href="bootstrap.min.css" rel="stylesheet">
  </head>

  <body>
    <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
    </header>

    <div class="container">
      <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3">
        </div><!-- col-3 -->

        <!-- メインコンテンツ -->
        <div class="col-xs-6 col-sm-6 col-md-6">

          <div class="panel-group" id="accordion1">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="#collapse11">
                    アコーディオン #1
                  </a>
                </h4>
              </div>
              <div id="collapse11" class="panel-collapse collapse in">
                <div class="panel-body">
                  <p>
                  アコーディオン #1<br>アコーディオン #1<br>
                  アコーディオン #1<br>アコーディオン #1
                  </p>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="#collapse12">
                    アコーディオン #2
                  </a>
                </h4>
              </div>
              <div id="collapse12" class="panel-collapse collapse">
                <div class="panel-body">
                  <p>
                  アコーディオン #2<br>アコーディオン #2<br>
                  アコーディオン #2<br>アコーディオン #2
                  </p>
                </div>
              </div>
            </div>
            <div class="panel panel-default">
              <div class="panel-heading">
                <h4 class="panel-title">
                  <a data-toggle="collapse" data-parent="#accordion1" href="#collapse13">
                    アコーディオン #3
                  </a>
                </h4>
              </div>
              <div id="collapse13" class="panel-collapse collapse">
                <div class="panel-body">
                  <p>
                  アコーディオン #3<br>アコーディオン #3<br>
                  アコーディオン #3<br>アコーディオン #3
                  </p>
                </div>
              </div>
            </div>
          </div><!-- panel-group -->

        </div><!-- col-6 -->
        <div class="col-xs-3 col-sm-3 col-md-3">
        </div><!-- col-3 -->
      </div><!-- row -->
    </div><!-- container -->

    <script src="jquery-1.10.2.min.js"></script>
    <script src="bootstrap.min.js"></script>
  </body>
</html>