Jquery: Hide all children, then show a specific element

Question

I want to hide all child elements in a div. And then show a specific one passed on to the function.

function subDisplay(name) {
   $("#navSub").each(function() {
      $(this).hide();
   });
   $(name).show();
}

then i call the function from an onmouse event like: subDisplay(#DivIwantToShow); But nothing displays...

What am i doing wrong?

What is passed in `name`? Is it a jQuery object, or a selector? Also, looking at your code it appears you have more than one `#navSub`, which is illegal HTML - you can only have one unique ID in the page - use classes instead. — Bojangles, Jan 05 '12 at 14:49
You need `subDisplay('#DivIwantToShow');` -- it's a string that you pass there — js-coder, Jan 05 '12 at 14:49
FYI, you can optimize your code by calling `$('#navSub').hide()`, rather than iterating over them using `each()` — Matt, Jan 05 '12 at 14:50
Are you actually using `subDisplay(#DivIWantToShow)` or are you using `subDisplay("#DivIWantToShow")`? Also, what happens if, in subDisplay, you `console.log(name)`? — Wing, Jan 05 '12 at 14:54

Brandon Kindred · Accepted Answer · 2012-01-05T14:57:04.110

90

You need to hide the children and not the containing div.

$("#navSub").children().hide();

So now if the div you are trying to show is an element in the parent div it will still show while the others stay hidden.

edited Jan 05 '12 at 14:57

answered Jan 05 '12 at 14:53

Brandon Kindred

1,468
14
21

1

Pretty simple and good, however, I would like to add that you can use toggle() for ease of life – clockw0rk Sep 04 '18 at 13:46

score 5 · Answer 2 · answered Jan 05 '12 at 14:52

If you're targeting the children of #navSub, you need target them and hide them, rather than the element navSub; which you can do using the children() method;

function subDisplay(name) {
    $('#navSub').children().hide();
    $(name).show();
};

Otherwise, it appears you have multiple elements with the same ID in your DOM, which is not allowed.

You then need to pass a string (which is a valid jQuery selector) to subDisplay();

subDisplay('#DivIwantToShow');

score 1 · Answer 3 · answered Jan 05 '12 at 14:51

1

function subDisplay(name) {
   $("#navSub").hide();
   $('#'+name).show();
}

answered Jan 05 '12 at 14:51

kaz

1,943
1
13
19

score 1 · Answer 4 · answered Jan 05 '12 at 14:52

1

To summarize the great comments from @dotweb and @Matt;

function subDisplay(name) {
   $('#navSub').hide();
   $(name).show();
}

subDisplay('#DivIwantToShow');

answered Jan 05 '12 at 14:52

Stefan

5,644
4
24
31

score 1 · Answer 5 · answered Jan 05 '12 at 14:56

1

if the name of the element is passed in name use this:

    if($(this).attr('name') != name){
    //Hide it
    } else {
   //show it
}

answered Jan 05 '12 at 14:56

Teun Pronk

1,367
12
24

score 0 · Answer 6 · answered Sep 12 '19 at 13:39

If you want to hide child div using class.

<div class="parent_div">
    <div class="child_div">1st div</div>
    <div class="child_div">2nd div</div>
</div>

$(document).ready(function(){
    $(".parent_div").on('click',function(){
        $j(this).find("div").toggle();
    })
})

score 0 · Answer 7 · answered Jan 05 '12 at 14:52

0

Try having it outside of the loop, like so:

function subDisplay(name) {

     $("#navSub").hide();

     $(name).show();
}

http://jsfiddle.net/peduarte/m2pj8/

answered Jan 05 '12 at 14:52

peduarte

1,667
3
16
24

Jquery: Hide all children, then show a specific element

7 Answers7

Linked

Related