How to change dynamically a chevron left/down in gsp grails

I'm trying to find a way to change the lnr-chevron-left to lnr-chevron-down when the user click in the chevron and expand the view.

This is the code that I have in the gsp and don't work:

<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed lnr-chevron-down">

UPDATED

This is last code that I'm trying....

<body>
<div class="col-xs-2 col-sm-1 text-right">
<div data-toggle="collapse" id="changeChevron" data-parent="#accordion" href="#collapse${i}" class="lnr lnr-chevron-left collapsed"></div>                                      
</div>

<script type = "text/javascript">
        var clicked=false;
        $('#changeChevron').click(function(){
         clicked=true;
        });

        if (clicked) {
          $('#changeChevron').removeClass('lnr lnr-chevron-left').addClass('lnr lnr-chevron-down');
        } else {
          $('#changeChevron').removeClass('lnr lnr-chevron-down').addClass('lnr lnr-chevron-left');
        }
</script>
</body>

Thanks in advance

Solution

Maybe I'm late but if you have a css you can override the css like this:

.panel-heading .accordion-toggle.collapsed:after {
  /* symbol for "collapsed" panels */
  content: "\e875";
  float: right;
}

.panel-heading .accordion-toggle:after {
  /* symbol for "opening" panels */
  font-family: 'Linearicons-Free';
  content: "\e874";
  float: right;
  font-size:19px;
}