title: Collapsible container/column. Adding more than one link
body: <p>I'm trying to create a drop down effect similar to this image: <a href="http://i.stack.imgur.com/Mju1t.gif" rel="nofollow">GIF</a>, however with what I have so far: <a href="https://jsfiddle.net/sfcm95yz/1/" rel="nofollow">EXAMPLE</a> I can't seem to figure out a way to add more than one link, if I do add just another content div it doesn't show up.. Hope someone can help, been losing sleep over this haha. Thanks </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;Projects&lt;/div&gt;
    &lt;div class="content" onclick="initContent('example')"&gt;&lt;em&gt;Example Project&lt;/em&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JS:</p>
  
  <pre><code>$(".header").click(function() {
    $header = $(this);
    //getting the next element
    $content = $(this).next();
    //checking if its already visible
    $content.slideToggle(500, function() {
      //execute this after slideToggle is done
      //change text of header based on visibility of content div
      $header.text(function() {});
    });
  });
  </code></pre>
  
  <p>What I would try:</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;Projects&lt;/div&gt;
    &lt;div class="content" onclick="initContent('example')"&gt;&lt;em&gt;Example Project&lt;/em&gt;&lt;/div&gt;
  &lt;div class="content" onclick="initContent('exampleNew')"&gt;&lt;em&gt;Example Project 2&lt;/em&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>