<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<!-- this will center a col 6, and 3 on each side -->
<div class="col-md-6 col-md-offset-3">
<img src="https://cdn1.iconfinder.com/data/icons/pleasant/Help-File.png" class="pull-right" alt="">
<h2>
TEST: Expanding FAQ's <small>using CSS for drop capitals</small>
</h2>
<hr>
<p>
You can click on any question or expand them all.
</p>
<button id="collapse-init" class="btn btn-primary">Expand all</button>
<br>
<br>
<div class="panel-group" id="accordion">
<!-- First Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseOne">
Q: Do you accept Visa?
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse">
<div class="panel-body">
<blockquote>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</blockquote>
</div>
</div>
</div><!-- Second Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">
Q: Do you ship to Canada?
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<blockquote>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</blockquote>
</div>
</div>
</div><!-- Third Panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title" data-toggle="collapse" data-target="#collapseThree">
Q: How do I tie a tie?
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<blockquote>
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. <iframe width="420" height="315" src="//www.youtube.com/embed/9BMhFmNzw-o" frameborder="0" allowfullscreen=""></iframe>
</blockquote>
</div>
</div>
</div>
</div>
<hr>
</div><!-- ./col-md6 -->
</div><!-- ./row -->
</div><!-- ./containter -->
/*
since pael title is not a link or a button, change the cursor
*/
.panel-title:hover {
cursor: pointer;
}
button {
width: 155px !important;
}
h4:first-child:first-letter { float: left; color: #428BCA; font-size: 25px; line-height: 40px; padding-top: 0px; padding-right: 12px; padding-left: 3px; }
// Ref: http://jsfiddle.net/KyleMit/f8ypa/
$(function() {
var active = true;
$('#collapse-init').click(function() {
if (active) {
active = false;
$('.panel-collapse').collapse('show');
$('.panel-title').attr('data-toggle', '');
$(this).text('Collapse');
} else {
active = true;
$('.panel-collapse').collapse('hide');
$('.panel-title').attr('data-toggle', 'collapse');
$(this).text('Expand');
}
});
$('#accordion').on('show.bs.collapse', function() {
if (active) $('#accordion .in').collapse('hide');
});
});
