I am trying to build a slide down menu with four headings. Once I click on a heading its list has to slide down and slide back up once clicked again. I could do this only with all the lists, I mean once I click any heading all the list slide at same time. Could you please help to make each list which belongs to heading to appear once clicked. Thanks. 

HTML

```
<nav>
    <ul>
          <li class="menu-block">heading1
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
          <li class="menu-block">heading2
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
          <li class="menu-block">heading3
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
          <li class="menu-block">heading4
            <ul>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            <li><a href="">item</a></li>
            </ul>
          </li>
    </ul>
</nav>

```

CSS

```
nav{
    position:fixed;
    right: 0;
    background: #fff;
    color: #000;
    height: 100%;
    width: 100%;
}
nav ul:first-child{
    float: right;
    position: relative;
    height: 100%;
    width:30%;
    background: #fff;
    text-align: center;
}
nav .menu-block li{
    width: 50%;
    height: auto;
    border: 1px solid black;
    font-size: 0.8em;
    text-align: left;
    display: none;
}

```

JQuery

```
$(".menu-block").click(function(){
    $(this).find('nav .menu-block li').slideDown(500);
});

```