<!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>