Bootstrap accordion

by Rob Sedgwick

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" href="#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" href="#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" href="#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" href="#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>

<div class="panel-group">
    <div class="panel panel-default">
<div class='panel-heading' data-toggle='collapse'  data-target='#collapse1'>
    <i class='fa fa-fw fa-chevron-down'></i>
    <i class='fa fa-fw fa-chevron-right'></i>England
                  </div>
                  <div class='panel-body'>
                  <div id='collapse1' class='panel-collapse...