jQuery .show() - show / hide for multiple elements

Question

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.

Possible duplicate: http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element — dewd, May 29 '13 at 10:36

score 2 · Accepted Answer · answered May 29 '13 at 10:47

2

Try this:

$('.trigger').click(function (e) {
    e.stopPropagation();
    $('.show').hide();    
    $(this).next('.show').slideDown();
});

$(document).click(function () {
    $('.show').slideUp();    
});

FIDDLE DEMO

answered May 29 '13 at 10:47

palaѕн

72,112
17
116
136

That good - thanks! The only issue here is that it closes the opened content when clicking on that content itself. There may well be links within that content, so clicking on the content itself shouldn't hide it. Many thanks for your answer :) – Dave May 29 '13 at 10:52

score 1 · Answer 2 · answered May 29 '13 at 10:51

1

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

answered May 29 '13 at 10:51

mlwacosmos

4,391
16
66
114

Thanks for this! It's good, but when I use mulitple UL's on the page (as I plan to), the "click away" function doesn't work that well, I've made a new Pen for yours here: http://codepen.io/juxprose/pen/oHKkf – Dave May 29 '13 at 11:00
It is normal.. you are using the same id... the id is unique but you have several times the same one... instead of using an id, use a class and change the code to use .listsItems instead of #listItems – mlwacosmos May 29 '13 at 11:04
so it works... it is just that your ul are very long, so when you click outside you may click on a ul so it does not go away... You can put all of this in a div with an id #listsItems and choose a width for example or you can choose to calculate the closest to the ... you do as you wish and see what is working for you – mlwacosmos May 29 '13 at 11:18

score 0 · Answer 3 · answered May 29 '13 at 10:37

0

Try this,

$('.trigger').click(function(){
    $('.show').slideUp();
    $(this).next('.show').slideDown(); 
});

Fiddle http://jsfiddle.net/8jedA/

answered May 29 '13 at 10:37

Rohan Kumar

40,431
11
76
106

That's excellent thanks. Great, that's nearly perfect, the only thing I'd like it to do in addition to that functionality, is to hide the opened items when clicked away from the opened content, thanks! – Dave May 29 '13 at 10:45

jQuery .show() - show / hide for multiple elements

3 Answers3

Linked