D.O. D.O. - 1 year ago 135
CSS Question

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">


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

<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>

<script type = "text/javascript">
var clicked=false;

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');

Thanks in advance

Answer Source

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;
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download