title: Highlight and Hide DIV onClick
body: <p>How to <strong>Animate/Highlight</strong> the Div <strong>before</strong> hide, when click on <strong>desired</strong> Div?</p>
  
  <pre><code>Here is my JS DEMO:
  </code></pre>
  
  <p><a href="http://jsfiddle.net/L7tK3/17/" rel="nofollow">http://jsfiddle.net/L7tK3/17/</a></p>
  
  <p>I want to animate or highlight the <strong>Clicked or Selected</strong> Div first and then its should hide.</p>
  
  <p><strong>Here is the HTML :</strong></p>
  
  <pre><code>&lt;div id="response_1" class="container"&gt;
      &lt;span id="1" class="hide_content"&gt;
          &lt;a href="javascript:void(0);"&gt;Click Here To Hide First Div&lt;/a&gt;
      &lt;/span&gt;  
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;div id="response_2" class="container"&gt;
      &lt;span id="2" class="hide_content"&gt;
          &lt;a href="javascript:void(0);"&gt;Click Here To Hide Second Div&lt;/a&gt;
      &lt;/span&gt;  
  &lt;/div&gt;
  
  &lt;br&gt;
  
  &lt;div id="response_3" class="container"&gt;
      &lt;span id="3" class="hide_content"&gt;
          &lt;a href="javascript:void(0);"&gt;Click Here To Hide Third Div&lt;/a&gt;
      &lt;/span&gt;  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Here is CSS:</strong></p>
  
  <pre><code>.container{
      border:#666666 solid 1px;  
      padding:4px;
  }
  </code></pre>
  
  <p><strong>Here is JS:</strong></p>
  
  <pre><code>$('.hide_content').click(function ()
                           {
                             var current_number = $(this).attr("id");  
                             $('#response_'+current_number).hide();
                           });
  </code></pre>