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

Answer 1

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