JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div class="container container-pad">
  <div class="col-md-12">
    <div class="row">
      <div class="col-md-3">
        <ul class="list-group category" role="tablist">
          <li class="list-group-item">
            <a role="button" data-toggle="collapse"  href="#collapseOne">
              categories 1
            </a>
          </li>
          <ul id="collapseOne" class="panel-collapse collapse">
            <li class="list-group-item" role="presentation">
              <a href="#category1" aria-controls="category1" role="tab" data-toggle="tab">category 1<span class="badge">1</span></a>
            </li>
            <li class="list-group-item" role="presentation">
              <a href="#category2" aria-controls="category2" role="tab" data-toggle="tab">category 2<span class="badge">2</span></a>
            </li>
          </ul>
          <li class="list-group-item">
            <a role="button" data-toggle="collapse"  href="#collapseTwo">
              categories 2
            </a>
          </li>
          <ul id="collapseTwo" class="panel-collapse collapse">
            <li class="list-group-item" role="presentation">
              <a href="#category3" aria-controls="category3" role="tab" data-toggle="tab">category 3<span class="badge">3</span></a>
            </li>
          </ul>
          <li class="list-group-item">
            <a role="button" data-toggle="collapse"  href="#collapseThree">
              categories 3
            </a>
          </li>
          <ul id="collapseThree" class="panel-collapse collapse">
            <li class="list-group-item" role="presentation">
              <a href="#category4" aria-controls="category4" role="tab" data-toggle="tab">category 4<span class="badge">4</span></a>
            </li>
            <li...

CSS

.badge {
  float: right;
}

JavaScript

$('ul.panel-collapse li').click(function (e) { 
    $('ul li.active').removeClass('active')
    e.preventDefault()
    .tab('show');
    $(this).addClass('active')
});