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?

Answer 1

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.

Answer 2

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');