Bootstrap accordion

by Chris Rebert

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
<div id="accordion" role="tablist">
  <div class="card panel">
    <div id="panel-1-head" class="card-header" role="tab" data-toggle="collapse" data-parent="#accordion" data-target="#panel-1-data">Header 1</div>
    <div id="panel-1-data" class="card-block panel-collapse collapse in" role="tabpanel">Content 1</div>
  </div>
  <div class="card panel">
    <div id="panel-2-head" class="card-header" role="tab" data-toggle="collapse" data-parent="#accordion" data-target="#panel-2-data">Header 2</div>
    <div id="panel-2-data" class="item-basic card-block panel-collapse collapse" role="tabpanel">

      <div id="accordion2" role="tablist">
        <div class="card panel">
          <div id="panel-2-head-1" class="card-header" role="tab" data-toggle="collapse" data-parent="#accordion2" data-target="#panel-1-data">Sub-header 1</div>
          <div id="panel-2-data-1" class="item-basic card-block panel-collapse collapse in" role="tabpanel">Content sub-panel 1</div>
        </div>
        <div class="card panel">
          <div id="panel-2-head-2" class="card-header" role="tab" data-toggle="collapse" data-parent="#accordion2" data-target="#panel-2-data">Sub-Header 2</div>
          <div id="panel-2-data-2" class="item-basic card-block panel-collapse collapse" role="tabpanel">Content sub-panel 2</div>
        </div>
      </div>

    </div>
  </div>
</div>