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 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>
      <h3>England</h3>
    </div>
    <div class='panel-body'>
      <div id='collapse1' class='panel-collapse collapse in'>
        <ul>
          <li><a href="/allfixtures.php?league=1">Premier League Fixtures</a>
            <br>
            <li><a href="/allfixtures.php?league=2">Championship Fixtures</a>
              <br>
              <li><a href="/allfixtures.php?league=3">League One Fixtures</a>
                <br>
                <li><a href="/allfixtures.php?league=4">League Two Fixtures</a>
                  <br>
        </ul>
      </div>
    </div>
    <div class='panel-heading' data-toggle='collapse' data-target='#collapse2'>
      <i class='fa fa-fw fa-chevron-down'></i>
      <i class='fa fa-fw fa-chevron-right'></i>
      <h3>Scotland</h3>
    </div>
    <div class='panel-body'>
      <div id='collapse2' class='panel-collapse collapse'>
        <ul>
          <li><a href="/allfixtures.php?league=10">Scottish Premiership Fixtures</a>
            <br>
            <li><a href="/allfixtures.php?league=11">Scottish Championship Fixtures</a>
              <br>
              <li><a href="/allfixtures.php?league=12">Scottish League One Fixtures</a>
                <br>
                <li><a href="/allfixtures.php?league=13">Scottish League Two Fixtures</a>
                  <br>
                  <li><a href="/allfixtures.php?league=14">Scottish Cup Fixtures</a>
                    <br>
                    <li><a...

CSS

.panel-heading {
  position: relative;
}

.panel-heading[data-toggle="collapse"]:after {
  font-family: 'Glyphicons Halflings';
  content: "\e072";
  /* "play" icon */
  position: absolute;
  color: #b0c5d8;
  font-size: 18px;
  line-height: 22px;
  right: 20px;
  top: calc(50% - 10px);
  /* rotate "play" icon from > (right arrow) to down arrow */
  -webkit-transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
  transform: rotate(-90deg);
}

.panel-heading[data-toggle="collapse"].collapsed:after {
  /* rotate "play" icon from > (right arrow) to ^ (up arrow) */
  -webkit-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -o-transform: rotate(90deg);
  transform: rotate(90deg);
}