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 `.project-name-block` 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.

Side note...how could I get the first `project-name-block` to be fully expanded on page load?

UPDATE:

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..

```
$('.project-name-block').click(function() {
  //$(this).slideToggle('slow');
  $('.project-name-description').slideToggle('slow');
  //$(this).attr('project-name-description').show();
});

```

Original code:

```js
$('.project-name-block').click(function() {
  $(this).slideToggle('slow');
  //$(this).attr('project-name-description').show();
});
```

```css
.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;
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script><div class="project-name-container-right">
    <div class="project-name-block">
     <div class="project-name-title">Project 1</div>
     <div class="project-name-description">This is the text for Project 1</div>
    </div>
    <div class="project-name-block">
     <div class="project-name-title">Project 2</div>
     <div class="project-name-description">This is the text for Project 2</div>
    </div>
    <div class="project-name-block">
     <div class="project-name-title">Project 3</div>
     <div class="project-name-description">This is the text for Project 3</div>
    </div>
   </div>
```