title: Make a partially hidden div show up the full content
body: <p>I would be thankful if you could find a solution for me. I have a list of articles each one in a partially hidden div (div is 200px height). When I click on readmore it should nicely slide down showing up the rest of the content.</p>
  
  <p>Here is the html:</p>
  
  <pre><code>&lt;style&gt;
      .content {height:200px;}
  &lt;/style&gt;    
  &lt;div class="content_1"&gt;Full text here...&lt;/div&gt;&lt;a href="" class="readmore"&gt;&lt;/a&gt;
  &lt;div class="content_2"&gt;Full text here...&lt;/div&gt;&lt;a href="" class="readmore"&gt;&lt;/a&gt;
  &lt;div class="content_3"&gt;Full text here...&lt;/div&gt;&lt;a href="" class="readmore"&gt;&lt;/a&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the jquery code (it works but only for content_2:</p>
  
  <pre><code>var len = $('.wrap &gt; .content').length;
    $("a.readmore").click(function(event){
      var hiddenContent = $(".wrap &gt; .content_2");
     event.preventDefault();
     hiddenContent.animate({
      height: '500px'
    }, 1000, function() {
      // Animation complete.
    });
  
    });
  </code></pre>
  
  <p>How do I iterate over ".content_"+i so I can make it work for the specific div I click?
  I tried looping with each, for etc...but I got no luck</p>