title: jQuery: How do I target the clicked element when they all share the same CSS class?
body: <p>I have 3 div elements on my page and each of them has a same CSS class ".shape"</p>
  
  <p>Within my JS, I want to target the current click ".shape" so that some extra html will get inserted to the bottom of the ".shape" with a jQuery slideDown transition.</p>
  
  <p>And when you click on the ".shape" again, the extra html will slideUp.</p>
  
  <p>How do I do that in an easy way? 
  What I have:</p>
  
  <pre><code>$(".shape").click(function() {
      var id = $(this).attr("id");
      var selected = id + "-reveal";
  });
  </code></pre>
  
  <p>In my HTML,</p>
  
  <pre><code>&lt;div class="shape" id="shape1"&gt;Content&lt;/div&gt;
  &lt;div class="hidden" id="shape1-reveal"&gt;Content&lt;/div&gt;
  
  &lt;div class="shape" id="shape2"&gt;Content&lt;/div&gt;
  &lt;div class="hidden" id="shape2-reveal"&gt;Content&lt;/div&gt;
  
  &lt;div class="shape" id="shape3"&gt;Content&lt;/div&gt;
  &lt;div class="hidden" id="shape3-reveal"&gt;Content&lt;/div&gt;
  </code></pre>
  
  <p>I also have no idea how to add in the toggle + sliding effect.</p>
  
  <p>EDIT:
  The solution
  <a href="http://codepen.io/vennsoh/pen/rVjeQy" rel="nofollow">http://codepen.io/vennsoh/pen/rVjeQy</a></p>
  
  <p>Not sure if the way I wrote my JS is the most elegant approach.</p>