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

Question

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

V H · Answer 1 · 2016-06-07T15:38:40.203

1

Try something like this:

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

This is an example and it is all off the top off my head as in not tested but it will give you the idea

<g:javascript>
////$('.lnr-chevron-left').on('click', function() { 
$('#myId').on('click', function() { 
 $(this).removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
event.stopPropagation();
}); 
</g:javascript>

You will then need to change it back when the user no longer is clicking it it

So instead you could try something like:

<g:javascript>
var clicked=false;
$('#myId').click(function(){
 clicked=true;
});

if (clicked) {
  $('#myId').removeClass('lnr-chevron-left').addClass('lnr-chevron-down');
} else {
  $('#myId').removeClass('lnr-chevron-down').addClass('lnr-chevron-left');
}
</g:javascript>

That clicked function may not work, a much neater way seems to be focus:

https://api.jquery.com/focus-selector/

edited Jun 07 '16 at 15:38

answered Jun 03 '16 at 17:58

V H

8,382
2
28
48

personally though I would take on this kind of approach http://www.tutorialspoint.com/bootstrap/bootstrap_button_dropdowns.htm and then ammend a little bit of javascript like above or something like it to make it work - it is easier when half of it is already done – V H Jun 03 '16 at 18:43
Hi @vahid. I'm trying your code (with the if clicked ) but it doesn't work... and the other one don't work too. I'm adding the g:javascript inside of the body tag in the gsp – S.P. Jun 07 '16 at 11:01
@D.O. it might be that you need to remove all the classes and add a new set all together so if you have it as $('#myId').removeClass('lnr lnr-chevron-left collapsed').addClass('lnr lnr-chevron-down'); If that makes any sense as in look for the entire class line and remove all of it in 1 call then add the new set as you wish it to be. Try on a more basic 1 class example (green/red) changing colours in a css style – V H Jun 07 '16 at 11:07
I've tested that the script should be working, because I can add the chevron left with the script. But maybe something is wrong in the logic of the script, because don't do the change to chevron down with I do the click – S.P. Jun 07 '16 at 11:15
@D.O. Can you update your question with what you have so far and I can see if I spot the issue – V H Jun 07 '16 at 11:20
@D.O. cool well that looks correct. Then maybe the logics of ifclicked is not working too well. You can try a few variations. Maybe using data element is cool http://stackoverflow.com/questions/12444534/jquery-how-to-detect-if-an-element-is-not-clicked or follow this thread: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element?page=1&tab=active#tab-top or this http://stackoverflow.com/questions/6081608/jquery-check-if-it-is-clicked-or-not you are nearly there - just need the correct logics to work out if it is clicked or not – V H Jun 07 '16 at 11:27

score 0 · Accepted Answer · answered Jun 08 '16 at 09:38

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

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

2 Answers2