How to collapse .panel Bootstrap on tablets?

Question

css

Bootstrap question . I am using the Panels component.

<div class="row">
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel title</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel title</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
  <div class="col-md-4">
    <div class="panel panel-default">
      <div class="panel-heading">Panel title</div>
      <div class="panel-body">Panel content</div>
    </div>
  </div>
</div>

When the browser window is reduced, I want the panels to collapse like an accordion. How can you do?

Answer 1

Alternatively, panel-bodyadd the class for hidden-xs. And panel-headinghang on

$(this).siblings('.panel-body').toggleClass('hidden-xs')

.