collapse_rotate.html

    <div class="card">
        <div class="card-header">
            <span style="display:block">
                <span   data-target="#job-{{ job.ref_number }}" data-toggle="collapse"
                        class="text-muted pull-right el-collpse" style="cursor: pointer" aria-expanded="false">
                    <i  class="fa fa-angle-right js-rotate-if-collapsed"></i>
                </span>
            </span>
            <span style="display:block">
                {{ job.title }}
            </span>
        </div>
        <div id="job-{{ job.ref_number }}" class="card-body collapse">
                <h1> here thre !</h1>
        </div>
    </div>

rotate.css

  .card-header .fa{
       transition: .5s transform ease-in-out;
   }

   [data-toggle="collapse"][aria-expanded="true"] > .js-rotate-if-collapsed {
       -webkit-transform: rotate(90deg);
       -moz-transform: rotate(90deg);
       -ms-transform: rotate(90deg);
       -o-transform: rotate(90deg);
       transform: rotate(90deg);
     }

toggle_true_false.js

  var flag = false;
  $('.el-collpse').click(function(){
      flag = !flag;
      $(this).attr('aria-expanded', flag)
      console.log(flag);
  })