Bootstrap折叠文字更改

Question

i'm using bootstrap collapse. I'm trying to add a simple jquery statement, once a user click on one of the collapse than a icon changes. I have multiple collapses on the page so, I'm guessing I'll have to use the "this" statement in the code.

Here is the HTML

<a data-toggle="collapse" href="#y2012" aria-expanded="false" aria-controls="y2012">
  <i class="fa fa-caret-right"></i> 2012
</a><br />
<div class="collapse" id="y2012">
  text
</div>
<a data-toggle="collapse" href="#y2013" aria-expanded="false" aria-controls="y2013">
  <i class="fa fa-caret-right"></i> 2013
</a><br />
<div class="collapse" id="y2013">
  text
</div>

Here is my JS i got at the moment

$(".collapse").hasClass("in")?true : (function(){
    $("a i").removeClass('fa-caret-right');
    $("a i").addClass('fa-caret-down');
}, function () {
    $("a i").removeClass('fa-caret-down');
    $("a i").addClass('fa-caret-right');
});

---------------UPDATED---------------- So I've kind of got it working I've changed the js to

    $('.collapsible').click(function () {
        var $this = $(this);
        $this.toggleClass('collapsible');
        if ($this.hasClass('collapsible')) {
            $this.children("i").removeClass('fa-caret-right');
            $this.children("i").addClass('fa-caret-down');
        } else {
            $this.children("i").addClass('fa-caret-right');
            $this.children("i").removeClass('fa-caret-down');
        }
    });

And have added the class collapsible to the a tag so it would be

  <a data-toggle="collapse" href="#y2012" aria-expanded="false" aria-controls="y2012" class="collapsible">
    <i class="fa fa-caret-right"></i> 2012
  </a><br />

It now kind of works but the issue is once you click the a tag at first it does nothing, then click it again the function starts working, which then becomes unsync to the way i wanted it to work in the first place.

Answer 1

$(".collapse").click(function(){
  $(this).hasClass("in")?true : (function(){
      $(this).children("i").removeClass('fa-caret-right');
      $(this).children("i").addClass('fa-caret-down');
  }, function () {
      $(this).children("i").removeClass('fa-caret-down');
      $(this).children("i").addClass('fa-caret-right');
  });
});