Slide Down and Slide Up Toggle

Question

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);
});

Answer 1

You need to find the lis inside the clicked li. Besides, you might want to use slideToggle for this purpose:

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

Demo:

https://jsfiddle.net/q2gzamg6/

PS. You need to work on your css style definition here.