Bootstrap Snippet TEST: Expanding FAQ's using CSS for drop capitals using HTML CSS Bootstrap jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*
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; }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
// 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');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST: Expanding FAQ's using CSS for drop capitals"
Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Expanding FAQ's using CSS for drop capitals" Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Expanding FAQ's using CSS for drop capitals"
Bootstrap 3.1.0 Snippet by mrmccormack