Reputation: 716
I am trying to achieve this:
Create a page with multiple lists, each containing a nested list to be revealed when a link is clicked.
When a link is clicked, and the content is revealed, when clicking on another link, the previously revealed content is hidden, and the new one revealed.
When clicking anywhere on the page away from the revealed content, this click will hide the item.
Here is a Pen showing the reveal action working as expected, but this does not function as I'd like so far.
http://codepen.io/juxprose/pen/pzvuC
Any pointers would be much appreciated.
Thanks.
Upvotes: 1
Views: 1975
Reputation: 4541
This code should do what you want if I understood well :
html :
<ul id="listItems">
<li><a href="#">Item1</a>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
<li>Item 1.3</li>
</ul>
</li>
<li><a href="#">Item2</a>
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
<li>Item 2.3</li>
</ul>
</li>
<li><a href="#">Item3</a>
<ul>
<li>Item 3.1</li>
<li>Item 3.2</li>
<li>Item 3.3</li>
</ul>
</li>
</ul>
js :
$(document).ready(function() {
$("#listItems ul").hide();
$("#listItems a").on("click", function() {
$("#listItems ul").hide();
$(this).next().show();
});
$(document).click(function(e) {
if ( $(e.target).closest('#listItems').length === 0 ) {
$("#listItems ul").hide();
}
});
});
Upvotes: 1
Reputation: 73896
Try this:
$('.trigger').click(function (e) {
e.stopPropagation();
$('.show').hide();
$(this).next('.show').slideDown();
});
$(document).click(function () {
$('.show').slideUp();
});
Upvotes: 2
Reputation: 40639
Try this,
$('.trigger').click(function(){
$('.show').slideUp();
$(this).next('.show').slideDown();
});
Fiddle http://jsfiddle.net/8jedA/
Upvotes: 0