title: Toggle card position using jQuery
body: <p>I'm trying to set up a website of bios for my characters I've made up. Each bio is on a "card" with class <code>.container</code>. When the page loads, all the cards are on the left side of the screen, and a dialog appears telling the user that clicking a card one "activates" it, i.e. "moves it to the right-side of the screen to be read."</p>
  
  <p>I've successfully coded the page so that when clicked, the appropriate card moves to the right side of the screen. I've also successfully programmed the code so a <em>double</em>-click returns the card to its place on the left side of the screen. My problem is that that isn't what I want. I want a single click to activate a inactive/deactivated card, and I want a single click to deactivate an active one.</p>
  
  <p>As I said, the code ran fine when the two actions (activating and deactivating) were in their own event handlers, but I cannot get them to run when they're in the same event handler. I can't figure out why.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;My Characters&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="data\My Characters.css"/&gt;
      &lt;script src="data/jQuery.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;header&gt;
      &lt;h1&gt;My Characters&lt;/h1&gt;
      &lt;h2&gt;All the different characters I've created over the years, many of whom have superpowers based on animals.&lt;/h2&gt;
  &lt;/header&gt;
  
  &lt;article id="background"&gt;
  &lt;section id="main"&gt;
  
  &lt;section class="container" id="Vacuum"&gt;
      &lt;h3&gt;The Vacuum&lt;/h3&gt;
  
      &lt;p&gt;
          Born the child of an inventor, the Vacuum's father made it big when he perfected a hand-held design for the L-RAD sonic beam weapon. Licensing his design to the military netted the Vacuum's immediate family 8.5B USD.
      &lt;/p&gt;
  
      &lt;p&gt;
          As a result, from a young age, the Vacuum learned martial arts, developing a unique system devoid of blocks and strikes, relying instead on locks, flips, and holds.
      &lt;/p&gt;
  
      &lt;p&gt;
          A secondary effect of his contact with military personnel is that the Vacuum was genetically altered in such a way that he can now control air, i.e. &lt;i&gt;aerokinesis&lt;/i&gt;. Due to the extent of his powers , he has steel braces around his wrists, limiting his powers. he wears a comfortable sweat-suit with a custom mask that has a built-in night-vision visor.
      &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;section class="container" id="Mu"&gt;
      &lt;h3&gt;Mu&lt;/h3&gt;
      &lt;p&gt;
          Mu is a lifelong crime-fighter, staring with his fifteen-year military career. After ending his enlistment as a general, he spent twenty-five years as an undercover police officer, and another ten years behind a desk at the FBI.
      &lt;/p&gt;
  
      &lt;p&gt;
          During his time with the military, he was experimented on by a secret Government department, genetically altering Mu in such a way as to allow him to control friction.
          &lt;br /&gt;
          The purpose of the experiment was to enable Mu to chase down and capture the previous genetic experiments: civilian and military prisoners recruited by a mole hoping to overthrow the US Government from within.
      &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;section class="container" id="Elasmobranchii"&gt;
      &lt;h3&gt;Elasmobranchii&lt;/h3&gt;
      &lt;p&gt;
          A former Navy SEAL recruited by the mole to act as a field leader for the traitorous plot. Elasmobranchii joined "the cause" after his unit was denied benefits following a disastrous mission. 
          The mission was an utter failure due to a clerical error, resulting in a cover-up. The cover-up was successful due to both a smear campaign and a few choice assassinations directed at the SEALs involved.
      &lt;/p&gt;
  
      &lt;p&gt;
          Elasmobranchii is named for the subclass containing sharks, skates, and rays. In accordance with this name, Elasmobranchii has superhuman senses of smell, touch, and hearing; as well as superhuman strength and speed. His greatest sense, however, is his electroreceptive sense: he can detect a one-volt battery from 1,000 miles away.
          &lt;br /&gt;
          As if all this weren't enough, he also has a long, venomous, barbed tail he can use as an additional weapon or to pick up small objects.
      &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;section class="container" id="Phyllobates"&gt;
      &lt;h3&gt;Phyllobates&lt;/h3&gt;
  
      &lt;p&gt;
          Phyllobates was a promising boxer that spent his nights doing "favors" for the mob. After several years in prison, he was recruited by a Government mole to participate in a genetic testing program. The result of this testing was that Phyllobates could punch in 15/100ths of a second, exude any poison ingested through his pores, and leap about sixty feet up or over. He also has the ability to climb walls.
      &lt;/p&gt;
  &lt;/section&gt;
  
  &lt;/section&gt;  
  &lt;/article&gt;
  &lt;script src="data/My Characters.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>*
  {
      position: static;
  }
  
  body
  {
      background-image: url('Scorched Asphalt.png');
      background-size: cover;
      margin: 0;
      padding: 0;
  }
  
  header
  {
      width: 100%;
      text-align: center;
      background-color: rgba(238, 238, 238, 1);
      border: 2px solid black;
      margin: 0;
      padding: 0;
  }
  
  h1
  {
      margin-top: 0;
      margin-bottom: 0;
      font-weight: bold;
  }
  
  h2
  {
      margin-top: 0;
      font-size: large;
  }
  
  hr
  {
      color: black;
      border: 1px double black;
      border-style: double;
      width: 75%;
      margin: 0;
  }
  
  #main
  {
      width: 100%;
      margin-top: 0;
      margin-right: auto;
      margin-left: auto;
      padding-right: 1em;
      padding-left: 1em;
      line-height: 1em;
  }
  
  h3
  {
      padding: 0;
      margin: 0;
  }
  
  #Vacuum
  {
      left: 50px;
      top: 80px;
      border: 2px solid white;
      background-color: rgba(0, 0, 0, 1);
      color: white;
  }
  #Mu
  {
      left: 75px;
      top: 125px;
      background-color: rgba(125, 100, 50, 1);
  }
  
  #Elasmobranchii
  {
      left: 100px;
      top: 165px;
      background-color: rgba(50, 100, 125, 1);
  
  }
  
  #Phyllobates
  {
      left: 125px;
      top: 205px;
      background-color: rgba(255, 255, 255, 1);
  }
  
  .container
  {
      width: 33%;
      height: 67%;
      border: solid black 2px;
      margin: 0;
      padding: 1em;
      border-radius: .5em;
      font-weight: bold;
      position: absolute;
  }
  
  .active
  {
      left: 33%;
      top: 380px;
  }    
  </code></pre>
  
  <p>jQuery/Javascript:</p>
  
  <pre><code>$(window).load(function(){
  
      //Inform the user on how the site works
      alert('\nClick a card to make it active.\nClick it again to de-activate it.');
  
      $('.container').click(function()
      {
          if($(this).css('left') == '50px'||'75px'||'100px'||'125px')
      {
          //Restore #Vacuum to its original position
          $('#Vacuum').css('left', '50px');
          $('#Vacuum').css('top', '80px');
          $('#Vacuum').css('z-index', '1');
  
          //Restore #Mu to its original position
          $('#Mu').css('left', '75px');
          $('#Mu').css('top', '125px');
          $('#Mu').css('z-index', '2');
  
          //Restore #Elasmobranchii to its original position
          $('#Elasmobranchii').css('left', '100px');
          $('#Elasmobranchii').css('top', '165px');
          $('#Elasmobranchii').css('z-index', '3');
  
          //Restore #Phyllobates to its original position
          $('#Phyllobates').css('left', '125px');
          $('#Phyllobates').css('top', '205px');
          $('#Phyllobates').css('z-index', '4');
  
          //Make the clicked '.container' the active one
          $(this).css('top', '15%');
          $(this).css('left', '50%');
          $(this).css('z-index', '5');
          $(this).addClass('active');
      }//End of IF condition
  
      else
      {
          //Restore #Vacuum to its original position
          $('#Vacuum').css('left', '50px');
          $('#Vacuum').css('top', '80px');
          $('#Vacuum').css('z-index', '1');
  
          //Restore #Mu to its original position
          $('#Mu').css('left', '75px');
          $('#Mu').css('top', '125px');
          $('#Mu').css('z-index', '2');
  
          //Restore #Elasmobranchii to its original position
          $('#Elasmobranchii').css('left', '100px');
          $('#Elasmobranchii').css('top', '165px');
          $('#Elasmobranchii').css('z-index', '3');
  
          //Restore #Phyllobates to its original position
          $('#Phyllobates').css('left', '125px');
          $('#Phyllobates').css('top', '205px');
          $('#Phyllobates').css('z-index', '4');
  
          //De-activate the clicked '.container'
          $(this).removeClass('active');
      }
  })//End of container.click
  
  });//End of document
  </code></pre>