Bootstrap 3.0 -Keep Accordions Open

by Kiran Duggal

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<button id="collapse-init" class="btn btn-primary">
  Disable accordion behavior
</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">
                 Collapsible Group Item #1
             </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse">
      <div class="panel-body">

        <ul class="dropdown">
          <li><a class="dropdown-toggle" data-toggle="dropdown">item - 1</a>
             <ul class="dropdown-menu">
              <li>item - 1.1</li>
              <li>item - 1.2</li>
              <li>item - 1.3</li>
            </ul>
          </li>
            <li><a classs="dropdown-toggle" data-toggle="dropdown">item - 2</a>
             <ul class="dropdown-menu">
              <li>item - 2.1</li>
              <li>item - 2.2</li>
              <li>item - 2.3</li>
            </ul>
          </li>
         </ul>
      </div>
    </div>
  </div>

  <!-- Second Panel -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" data-toggle="collapse" data-target="#collapseTwo">
                 Collapsible Group Item #2
             </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
      </div>
    </div>
  </div>

  <!-- Third Panel -->
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title" data-toggle="collapse"...

CSS

.panel-title:hover {
  cursor: pointer;
}