title: Expend div in height while every div has same class
body: <p>My problem is currently that I'm making a newsfeed with certain small articles.
  All the articles have the same class, which is logic.
  Every article has on the top right side a arrow which is poiting down.</p>
  
  <p>I want if people click on the arrow (which is an .svg-file) the content expand.
  The container has a height of <strong>78px</strong> and if the button is clicked it should expand so the height should be <strong>auto</strong> then.</p>
  
  <p>My problem is that I have no idea what to do in what language. jQuery or what I've read is JS.. because if I click normally on the button, everything with that class will expand, or get the auto height css. I only want that 1 container expands. I think some active element or focus method? I have no idea.</p>
  
  <p><strong>EXAMPLE</strong></p>
  
  <blockquote>
    <p>
    </p>
    
    
    
    <h1>This is a title</h1>
    
    <p>August 1, 2014 at 13:37</p>
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
    sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco
    laboris nisi ut aliquip ex ea commodo consequat. Duis aute
    irure dolor in reprehenderit in voluptate velit esse cillum
    dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
    non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    
    <p></p>
  </blockquote>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;article class="newsfeed_item"&gt;
  &lt;img src="../images/arrow_down.svg" alt="" class="expand" /&gt;
  &lt;div class="newsfeed_image"&gt;&lt;img src="../images/example-img.jpg" alt="" /&gt;&lt;/div&gt;
  &lt;h1&gt;This is a title&lt;/h1&gt;
  &lt;footer class="extra_info"&gt;August 1, 2014 at 13:37&lt;/footer&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  Ut enim ad minim veniam, quis nostrud exercitation ullamco
  laboris nisi ut aliquip ex ea commodo consequat. Duis aute
  irure dolor in reprehenderit in voluptate velit esse cillum
  dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.&lt;/p&gt;
  &lt;/article&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>article.newsfeed_item               {border-bottom:1px solid #ccc; width:100%; height:78px; clear:both; position:relative; overflow:hidden;}
  article.newsfeed_item h1            {}
  article.newsfeed_item p             {padding-bottom:5px; line-height:16px;}
  article.newsfeed_item .expand       {height:20px; position:absolute; top:10px; right:0; padding:0 5px;}
  article.newsfeed_item .expand:hover {cursor:pointer; background:#a2c139;}
  .expanded                           {height:auto;}
  footer.extra_info                   {font-family:"GudeaRegular"; font-size:10px; color:#999;}
  </code></pre>
  
  <p>any help how it can expand smoothly while a user clicks the image with  the class "expand"?
  Help is appreciated.</p>