title: Advanced toggle function to show some items
body: <p>Need an advanced javascript toggle function. 
  (I have no experience with writing my own js and hope someone can help me). </p>
  
  <p>When clicking on an img then make an other div from height=0 to height=auto (animated).
  I have duplicated the code so the toggle need to show - hide only the childs/parent div and not troggle all divs with the 'i-more' class.</p>
  
  <p>I made a fiddle to show what I want to do:</p>
  
  <p><a href="http://jsfiddle.net/fourroses666/vfyr1z0v/" rel="nofollow">EXAMPLE IN FIDDLE HERE ></a></p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="i-holder"&gt;
      &lt;div class="i-left"&gt;
          &lt;img class="i-one" src="http://placehold.it/200x120.jpg" /&gt;
          &lt;div class="i-more"&gt;
              &lt;img src="http://placehold.it/200x120.jpg" /&gt;
              &lt;img src="http://placehold.it/200x120.jpg" /&gt;
              &lt;img src="http://placehold.it/200x120.jpg" /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="i-right"&gt;
          &lt;h2&gt;Header here&lt;/h2&gt;
          &lt;p&gt;Text here text here text here text here text here text here text  here...&lt;/p&gt;
          &lt;img class="i-btn-more" src="http://placehold.it/40x30.jpg" alt="read more" /&gt;
          &lt;div class="i-more"&gt;
              &lt;p&gt;More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.&lt;/p&gt;
              &lt;p&gt;More text here more text more text more text more text more text more text more text more text more text here text here text here text here text here text here text here text here text here text here text here.&lt;/p&gt;
              &lt;a href="javascript();" class="less"&gt;Show less&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="clear"&gt;&lt;/div&gt;
  
      &lt;div&gt;
          &lt;h2&gt;More stuff like above here...&lt;/h2&gt;
          &lt;p&gt;A duplicate from above.&lt;/p&gt;
          &lt;p&gt;when click on the i-btn-more only that text and thumb will be visible and not all divs with that same class.&lt;/p&gt;
      &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.i-more{height:0; overflow:hidden;}
  
  .i-holder{width:600px; margin:20px; position:relative;}
  .i-left img{display:block; margin-bottom:10px;}
  
  .i-left{float:left; width:200px; background:#fc1; min-height:130px; }
  .i-right{float:right; width:320px; padding:0 50px 10px 10px; background:#6d1; min-height:130px; }
  
  .i-btn-more{position:absolute; cursor:pointer; margin:-40px 0 0 330px;}
  .i-more{clear:both;}
  
  .clear{clear:both;}
  </code></pre>