Slide down and slide up
I am trying to create a slide menu with four titles. As soon as I click on a title, its list should slide down and slide back after clicking again. I could only do this with all the lists, I mean as soon as I click on any title of the entire list slide at the same time. Could you please help to make every list that belongs to the title appear after click. Thank you.
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);
});
+3
source to share
2 answers
You need to find li
inside the pressed one li
. Also, for this purpose, you can use slideToggle
:
$(".menu-block").click(function(){
$(this).find('li').slideToggle(500);
});
Demo:
https://jsfiddle.net/q2gzamg6/
PS. You need to work on defining the CSS style.
+2
source to share
Use this way:
$(".menu-block").click(function(){
$(this).find('ul').slideDown(500);
});
Excerpt
$(function () {
$(".menu-block").click(function(){
$(this).find('ul').slideDown(500);
});
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<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>
0
source to share