collapsible panel

by wisegorilla

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          <span class="glyphicon glyphicon-education icon-2x"></span>&nbsp;&nbsp;Learn
          <span class="badge">42 topics</span>
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="list-group">
        <a href="#" class="list-group-item">
    Cras justo odio
  </a>
        <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
        <a href="#" class="list-group-item">Morbi leo risus</a>
        <a href="#" class="list-group-item">Porta ac consectetur ac</a>
        <a href="#" class="list-group-item">Vestibulum at eros</a>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          <span class="glyphicon glyphicon-list-alt icon-2x"></span>&nbsp;&nbsp;Sample Question
          <span class="badge">4 set</span>
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        <div class="loader_container"><span class="dot dot1"></span><span...

CSS

html {
  overflow-y: scroll;
}

#accordion {
  margin: 5px 20px;
}

.icon-2x {
  font-size: 20px;
  top: 4px;
}

.panel-heading {
  padding: 0px;
}

h4.panel-title {
  position: relative;
  width: 100%;
  height: 100%;
}

h4.panel-title a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-decoration: none;
  font-weight: 700;
  font-family: sans-serif, arial;
  font-size: 15px;
}

.panel-heading [data-toggle="collapse"]:after {
  font-family: 'Glyphicons Halflings';
  content: "\e259";
  /* "play" icon */
  float: right;
  color: #aaa;
  font-size: 13px;
  line-height: 22px;
}

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

#accordion .panel .list-group a {
  padding: 8px 5px 8px 20px;
}

#accordion .panel .list-group a:before {
  font-family: 'Glyphicons Halflings';
  content: ' \25CF';
  font-size: 20px;
  color: #aaa;
  line-height: 22px;
  margin-right: 10px;
}


/*loading*/

@keyframes loading {
  0% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  10% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
  45% {
    -webkit-transform: translateX(300px/2);
    transform: translateX(300px/2);
  }
  55% {
    -webkit-transform: translateX(300px/2);
    transform: translateX(300px/2);
  }
  90% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
  100% {
    -webkit-transform: translateX(300px);
    transform: translateX(300px);
  }
}

@keyframes loading-opacity {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
  75% {
    opacity: 0.7;
  }
  100% {
    opacity: 0;
  }
}

.loader_container .dot {
  opacity: 0;
  display: inline-block;
  height: 10px;
  width: 10px;
  border-radius: 50%;
...