title: Jquery show/hide div on dynamic content
body: <p>I have a loop which outputs the following content...</p>
  
  <pre><code>&lt;div class="item-title"&gt;&lt;a href=""&gt;Title here&lt;/a&gt;&lt;/div&gt;
     &lt;div class="item-content"&gt;
        &lt;div class="item-body"&gt;
        Body Here
        &lt;/div&gt;
     &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I want to HIDE .item-content on page load.</p>
  
  <p>When you click the title, it should SHOW .item-content</p>
  
  <p>When you click the title again, it should HIDE .item-content</p>
  
  <p>The problem is that as my query loops through, it assigns EVERY article a class of .item-content so EVERY article opens and closes together.</p>
  
  <p>How do I make it show each title ONLY opens the corresponding content and not every piece of article content?</p>