fgm
/
js__bootstrap_demos


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
							<!DOCTYPE html>
<html lang="en">
<head>
  <title>Blasting off with Bootstrap</title>
  <meta charset="utf-8"/>
  <meta http-equiv="X-UA-COMPATIBLE" content="IE=Edge"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="stylesheet" href="../css/bootstrap.min.css"/>
  <!--[if lt IE 9]>
  <script src="../js/html5shiv.3-7-0.js"></script>
  <script src="../js/respond.1-4-2.min.js"></script>
  <![endif]-->
</head>

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

    <!-- Panel 1 -->
    <div class="panel panel-default panel-info">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse"
             data-parent="#accordion"
             href="#collapseOne">
            Collapsible Group Item #1
          </a>
        </h4>
      </div>

      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="panel-body">
          <p>First Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
            do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea
            commodo consequat. Duis aute irure dolor in reprehenderit in
            voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id
            est laborum</p>
        </div>
      </div>
    </div>

    <!-- Panel 2 -->
    <div class="panel panel-default panel-warning">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse"
             data-parent="#accordion"
             href="#collapseTwo">
            Collapsible Group Item #2
          </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
            do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea
            commodo consequat. Duis aute irure dolor in reprehenderit in
            voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id
            est laborum</p>
        </div>
      </div>
    </div>

    <!-- Panel 3 -->
    <div class="panel panel-default panel-primary">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a data-toggle="collapse"
             data-parent="#accordion"
             href="#collapseThree">
            Collapsible Group Item #3
          </a>
        </h4>
      </div>
      <div id="collapseThree" class="panel-collapse collapse">
        <div class="panel-body">
          <p>Second Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
            do eiusmod
            tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
            veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea
            commodo consequat. Duis aute irure dolor in reprehenderit in
            voluptate
            velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
            occaecat
            cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id
            est laborum</p>
        </div>
      </div>
    </div>
  </div>
</div>

<!-- https://ajax.googleapis.com/ajax/libs/jquery/1.11.1.jquery.min.js -->
<script src="../js/jquery-1.11.2.min.js"></script>
<script src="../js/bootstrap.js"></script>

<script type="text/javascript">
//  $('.collapse').collapse({
//    "toggle": false
//  });

  $('.collapse').on('show.bs.collapse', function () {
    console.log("Opening tab", this.id)
  });

  $('.collapse').on('shown.bs.collapse', function () {
    console.log("Tab opened", this.id)
  });

  $('.collapse').on('hide.bs.collapse', function () {
    console.log("Closing tab", this.id)
  });

  $('.collapse').on('hidden.bs.collapse', function () {
    console.log("Tab closed", this.id)
  });
</script>
</body>
</html>