Getting a slideToggle to expand and show hidden content
<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>