Toggle color on click of icon

Question

I have two arrows(up and down) that toggle colors. This works great except I have a few problems with it.

when the arrow is clicked again, I want the color to go back to its original color but it stays as changed color until I click the other arrow.
I for-loop these arrows, and for instance if I have two set of arrows(two ups and two downs) and when I manipulate one set of arrows then the other set goes back to its original state.
even when logged out user clicks the arrow, the color still changes.

Can someone please help me to achieve the above goals?

This is what I have right now.

 <a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
  <span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
            <br />

<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span>     <br>

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
<script>
$(document).ready(function(){

    $('.glyphicon').click(function(){
        $('.glyphicon').css('color', '#333');
        $(this).css('color', '#16A085');
    });

});
</script>

http://stackoverflow.com/questions/35909265/change-icon-open-on-button-bootstrap/35909304#35909304 — Rino Raj, Mar 14 '16 at 06:42
you can use `.toggleClass()` to toggle the css class upon click.http://api.jquery.com/toggleclass/ — dreamweiver, Mar 14 '16 at 06:44

madalinivascu · Accepted Answer · 2016-03-14T06:51:05.940

0

Create css classes with the selected and not selected glyphicon colors:

    .selected {
    color:#16A085;
    }
  .not-selected {
    color:#333;
    }

Wrap the links in a div

<div class="votes">
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
  <span class="glyphicon glyphicon-triangle-top col-md-12" aria-hidden="true"></span></a>
            <br />

<span class="col-md-12" style="height:1px; font-family: 'Passion One', cursive; bottom:10px; padding-left:0.01em;
"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span>     <br>

<a href="/post/{{ post.slug }}/vote?is_up=0"  class="vote">
<span class="glyphicon glyphicon-triangle-bottom col-md-12" aria-hidden="true"></span></a>
</div>

js:

  $(document).ready(function(){

  $('.glyphicon').click(function(e){
  e.preventDefault();
        $(this).closest('.votes').find('.glyphicon').not(this).removeClass('selected').toggleClass('not-selected');
        $(this).removeClass('not-selected').toggleClass('selected');
    });
    });

https://jsfiddle.net/duuu4c60/

edited Mar 14 '16 at 06:51

answered Mar 14 '16 at 06:41

madalinivascu

32,064
4
39
55

thank you very much my only issue is I wish when I refresh the page, the arrow being clicked is still colored. I think I need to use cookies for this but not working...I can show u what I did, do you know about cookies too? – em four Mar 15 '16 at 07:20
you can use localstorage or cookies – madalinivascu Mar 15 '16 at 07:30
yeah I'm trying to study cookies now, as you can probably tell I'm a super beginner so not sure what and how to use cookies – em four Mar 15 '16 at 07:50
I'm learning from other source right now http://www.tangowithdjango.com/book/chapters/cookie.html – em four Mar 15 '16 at 08:00
I learnt django first, and started using js for my django project so I looked into that source. thanks for the link. by the way can you help me out again;) http://stackoverflow.com/users/6050147/em-four?tab=questions – em four Mar 15 '16 at 08:27

score 0 · Answer 2 · answered Mar 14 '16 at 07:05

use .hasClass() check to

$('.btn').bind('click',function(){
  if($('.btn i').hasClass('text-danger')){
      $('.btn i').removeClass('text-danger').next().html('');
  }else{
       $('.btn i').addClass('text-danger').next().html(' 1');
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">


<div class="text-center" style="font-size:24px">
  <h3>Sample</h3>
  <button class="btn btn-lg"><i class="glyphicon glyphicon-hand-up"></i><span></span></button>
</div>

Toggle color on click of icon

2 Answers2