css changing jquery syntax

Question

For my site I am trying to use an arrow that changes from a down arrow to an up arrow. I want to use css changing because I feel like that is the simplest way. My code is

$(".first1").on('click', 
  function () {
$('.arrow-down').css({"display" : "none"});
    $('.arrow-up').css({"display" : "inline"});
  },
  function () {
    $('.arrow-down').css({"display" : "inline"});
    $('.arrow-up').css({"display" : "none"});
  });
$(".last1").on('click', 
  function () {
    $('.arrow-down').css({"display" : "none"});
    $('.arrow-up').css({"display" : "inline"});
  },
  function () {
    $('.arrow-down').css({"display" : "inline"});
    $('.arrow-up').css({"display" : "none"});
  });

and

.arrow-up {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-bottom: 10px solid #FDFECD;
    display: none;
}
.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 10px solid #FDFECD;
    display: inline;
}

Explosion Pills · Accepted Answer · 2013-01-29 02:00:09Z

2

You can't bind two click events like that. Instead, you have to manage "click state" on your own:

$(".first1, .last1").data('active', false);

$(".first1, .last1").on('click', function () {
   if ($(this).data('active')) {
      $('.arrow-down').css({"display" : "none"});
      $('.arrow-up').css({"display" : "inline"});
      $(this).data('active', false);
   }
   else {
     $('.arrow-down').css({"display" : "inline"});
     $('.arrow-up').css({"display" : "none"});
     $(this).data('active', true);
   }
});

answered Jan 29, 2013 at 2:00

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

css changing jquery syntax

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related