JSFiddle - React, Tailwind, and code Playground

BS Accordion with Labeled List-Groups and Arrow

by Florian Gropp

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
  <div class="panel-group" id="accordion">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
        </h4>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in">
        <div class="list-group">
          <a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
          <a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
          <a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
          <a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
        </h4>
      </div>
      <div id="collapseTwo" class="panel-collapse collapse">
        <div class="list-group">
          <a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
          <a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
          <a href="#" class="list-group-item"><span class="badge">1</span> First Item</a>
          <a href="#" class="list-group-item"><span class="badge">12</span> Second Item</a>
        </div>
      </div>
    </div>
    <div class="panel panel-default">
      <div class="panel-heading">
        <h4 class="panel-title">
          <a class="accordion-toggle"...

CSS

.panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'Glyphicons Halflings';
  /* essential for enabling glyphicon */
  content: "\e114";
  /* adjust as needed, taken from bootstrap.css */
  float: right;
  /* adjust as needed */
  color: grey;
  /* adjust as needed */
}

.panel-heading .accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e080";
  /* adjust as needed, taken from bootstrap.css */
}