JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<a class="blog" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
   <div class="panel">
     <div class="panel-heading" role="tab" id="headingOne">
       <h4 class="panel-title">
         <div class="row">
           <div class="container col-md-12 heading-container">
             <div class="col-md-1 col-sm-2 text-center">
               <h3 class="date-text">Jun 25th</h3>
             </div>
             <div class="col-md-11 col-sm-10">
               <h3>This is where the post title goes</h3>
             </div>
           </div>
         </div>
       </h4>
     </div>
     <div class="panel-teaser panel-body" >
       <div class="row">
         <div class="col-md-1">
         </div>
         <div class="container col-md-11">
           This is where the description goes
           This should be the blog post's first paragraph (which needs to be catchy, no images here though)
          </div>
        </div>
      </div>
      <div id="collapseOne" class="panel-collapse collapse in" 
                 role="tabpanel" aria-labelledby="headingOne">
        <div class="panel-body">
          <div class="row">
            <div class="col-md-1">
            </div>
            <div class="container col-md-11">
              This is where the main text body goes.
              This should be the rest of the blog post, images and all)
             </div>
           </div>
         </div>
       </div>
       <span class="expand-image text-center glyphicon glyphicon-chevron-down turn-arrow"></span>
       <hr>
     </div>
   </a>
 <a class="blog collapsed" data-toggle="collapse" data-parent="#accordion"...

CSS

.expand-image.text-center.glyphicon.glyphicon-chevron-down.turn-arrow {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

JavaScript

$(document).ready(function () {
    $(".blog").each(function () {
        $(this).on("hide.bs.collapse", function () {
            $(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').removeClass('turn-arrow');
        });
        $(this).on("show.bs.collapse", function () {
            $(this).find('.expand-image.text-center.glyphicon.glyphicon-chevron-down').addClass('turn-arrow');
        });
    });
});