<style>
.expandHeader {
  cursor: pointer;
  background-repeat: no-repeat;
  position: relative;
  padding-left: 25px;
}
.collapseBody {
  cursor: pointer;
  background-repeat: no-repeat;
  padding-left: 25px;
}
.altHeader {
  position: relative;
  background-repeat: no-repeat;
}
  .collapseBody:before,#close:before {
    font-family:FontAwesome;
    font-size: 1em;
    margin-right:.25em;
    position:relative;
    content:'\f146 '
  }
  #readMore:before {
    font-family:FontAwesome;
    font-size: 1em;
    margin-right:.25em;
    position:relative;
    content:'\f0fe '
  }
</style>
  <script>
  $(document).ready(function(){
    $(".expandBody").hide();
    $(".expandHeader").click(function(){
      $(this).next(".expandBody").slideToggle("normal");
      $(this).closest(".expandHeader").toggleClass("altHeader");
      if($(this).attr("id")==="close"){
        $(this).attr("id","readMore");
      }else{
        $(this).attr("id","close");
      }
    });
    $(".collapseBody").click(function(){
      $(".expandHeader").removeClass("altHeader");
      $(".expandBody").slideUp("normal");
      $(".expandHeader").attr("id", "readMore");
    });
  });
  </script>