title: Remove class from one div and add to another div in one click
body: <p>I am using JQuery to make small images go bigger when clicked. </p>
  
  <p>When the div containing a small image is clicked, JQuery assigns a class "figure_full_demo" that makes it expand - when the large image-container is clicked, the class is removed.</p>
  
  <p>This works well even when the page contains several images. The problem occurs if a large image-container isnt clicked before clicking the next small container - then i have to double-click to make it expand.</p>
  
  <p>How can i remove class 'figure_full_demo' from large image-container and add it to a small container in ONE click? 
  Hope my question is clear - ill post some code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.figure').click(function() {  
    if ($('#wrapper').css('position') == 'relative'){
      $('#wrapper').css({'position':'static'});
      $('.figure').removeClass('figure_full_demo'); 
      $(this).addClass('figure_full_demo'); 
    }   
    else { 
      $('#wrapper').css({'position':'relative'});
      $('.figure').removeClass('figure_full_demo'); 
    } 
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#wrapper   { 
    position: relative;
    width: 100%;
    max-width: 690px; 
    padding: 30px 12px 60px 12px; 
    margin: 0 auto;
    box-sizing: border-box;
    border: 2px solid green;
  }
  .figure {
    border: 1px solid red; 
    cursor: pointer;
  }
  .figure_full_demo  {
    position: absolute;
    z-index: 5000;
    left: 5%;
    right: 5%;
    width: 90%;
    background: rgba(0,0,0,0.5);
  }  </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div id="wrapper"&gt;
    &lt;div class="figure"&gt; 
      &lt;img src="http://placehold.it/400x100/" alt="Pic 1"&gt;
    &lt;/div&gt;
  
    &lt;div class="figure"&gt; 
      &lt;img src="http://placehold.it/400x100/" alt="Pic 2"&gt;       
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>