Reputation: 209
This has been ask many times here, but I couldn't find a understandable solution for my code.
I want to create a mobile show/hide dropdown menu.
My code goes like:
<div>
<a href="">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
<a href="">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
<a href="">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
The subitems shall be hidden. When I click the a-Tag ("Click this link...") the subitems below shall show. Please give me a solution without alternating the code itself -Is that even possible?? Only the subitems of the clicked -Link shall collapse.
Any help?
Upvotes: 3
Views: 2593
Reputation: 1509
Working Solution: http://jsfiddle.net/avi_sagi/CfqGG/211/
Jquery:
$(document).ready(function () {
$(".collapse").parent().find(".subitem").hide();
$(".collapse").on('click', function () {
$(this).parent().find(".subitem").slideToggle();
});
});
HTML: - add containers(.list-group) to each submenu groups for parent() method to target the only list items in its group.
<div class="wrapper">
<div class="list-group">
<a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
<div class="list-group">
<a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
<div class="list-group">
<a class="collapse" href="javascript:void(0)">Click this Link to collapse the subitems</a>
<ul class="submenu">
<li class="subitem">1</li>
<li class="subitem">2</li>
<li class="subitem">3</li>
<li class="subitem">4</li>
</ul>
</div>
</div>
Upvotes: 0
Reputation: 292
$(div > a).on('click', function() {
var child = $(this).child('ul.submenu');
if ($(child).is(':hidden')) {
$(child).show();
}
else {
$(child).hide();
}
});
Upvotes: 1