JSFiddle - React, Tailwind, and code Playground

by Terry Mun

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="col-md-2">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
          #1
        </a>
      </h4>
    </div>
    <div id="timeline1" class="panel-collapse collapse">
      <div class="panel-body">
        <a href="#" class="thumbnail">
            <img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="col-md-2">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
          #2
        </a>
      </h4>
    </div>
    <div id="timeline1" class="panel-collapse collapse">
      <div class="panel-body">
        <a href="#" class="thumbnail">
            <img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="col-md-2">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
          #3
        </a>
      </h4>
    </div>
    <div id="timeline1" class="panel-collapse collapse">
      <div class="panel-body">
        <a href="#" class="thumbnail">
            <img class="img-responsive" src="http://placehold.it/250x160" alt="Thumb11" />
        </a>
      </div>
    </div>
  </div>
</div>
<div class="col-md-2">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#timeline1">
          #4
        </a>
      </h4>
    </div>
    <div id="timeline1" class="panel-collapse collapse">
      <div class="panel-body">
...

CSS

.col-md-3{
    width:25%
}
.col-md-2{
    width:16.66666667%
}
* {
    transition: .5s;
}

JavaScript

$('.panel-title').click(function() {
    $(this)
        // Find parent with the class that starts with "col-md"
        // Change class to "col-md-3"
        .closest('[class^="col-md"]')
            .toggleClass('col-md-2 col-md-3')
        // Find siblings of parent with similar class criteria
        // - if all siblings are the same, you can use ".siblings()"
        // Change class to "col-md-2"
        .siblings('[class^="col-md"]')
            .removeClass('col-md-3')
            .addClass('col-md-2');
});