title: Html on click change property; reclick back to original state
body: <p>I am trying to change the properties of a span element such as its borders and background colour when I click it. I also want to reset the element properties to what they used to be, when it is clicked again. However I am not being able to do it properly. I accept any type of solutions, including Jquery. Actually my code is currently Jquery:</p>
  
  <pre><code>$('.clickable_span').click(function() {
  
    if($(this).attr('border') == undefined || $(this).attr('border') == false) {
  
      $(this).css('background', 'white');
      $(this).css('border', '1px solid black');
  
    }
  
    else if($(this).attr('border') == true) {
  
         $(this).css('background', 'dimgrey');
         $(this).css('border', 'none');
  
    }
  
  });
  </code></pre>
  
  <p>It keeps entering the first if statement (I console.logged) so it changes the aspect of the element but doesn't reset it back to the original state. What is wrong with the code? Why does <em>$(this).attr('border')</em> is still equal to undefined after giving that property to the element? (the difference is visible).</p>