title: Getting a slideToggle to expand and show hidden content
body: <p>I am trying to get a menu to show only the titles on page load. Then when you click on a menu title or a <code>.project-name-block</code> the menu item expands and shows the description for the item clicked on. Right now this makes the menu item completely disappear. I commented out the way I was trying to get the description to show as it wasn't working.</p>
  
  <p>Side note...how could I get the first <code>project-name-block</code> to be fully expanded on page load?</p>
  
  <p>UPDATE:</p>
  
  <p>I changed my javascript to this, but I cannot figure out how to only get the box I clicked on to only show that specific description and not all three..</p>
  
  <pre><code>$('.project-name-block').click(function() {
    //$(this).slideToggle('slow');
    $('.project-name-description').slideToggle('slow');
    //$(this).attr('project-name-description').show();
  });
  </code></pre>
  
  <p>Original code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('.project-name-block').click(function() {
    $(this).slideToggle('slow');
    //$(this).attr('project-name-description').show();
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.project-name-block {
   border-top: 1px solid black;
   padding: 20px 10px;
   width: 30%;
  }
  .project-name-title {
   color: blue;
   font-size: 2em;
  }
  .project-name-description {
   display: none;
   font-size: 1em;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;&lt;div class="project-name-container-right"&gt;
      &lt;div class="project-name-block"&gt;
       &lt;div class="project-name-title"&gt;Project 1&lt;/div&gt;
       &lt;div class="project-name-description"&gt;This is the text for Project 1&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="project-name-block"&gt;
       &lt;div class="project-name-title"&gt;Project 2&lt;/div&gt;
       &lt;div class="project-name-description"&gt;This is the text for Project 2&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="project-name-block"&gt;
       &lt;div class="project-name-title"&gt;Project 3&lt;/div&gt;
       &lt;div class="project-name-description"&gt;This is the text for Project 3&lt;/div&gt;
      &lt;/div&gt;
     &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>