Jquery: Hide all children, then show a specific element
Solution 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.
Solution 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');
Solution 3
if the name of the element is passed in name use this:
if($(this).attr('name') != name){
//Hide it
} else {
//show it
}
Solution 4
function subDisplay(name) {
$("#navSub").hide();
$('#'+name).show();
}
Solution 5
To summarize the great comments from @dotweb and @Matt;
function subDisplay(name) {
$('#navSub').hide();
$(name).show();
}
subDisplay('#DivIwantToShow');
![Christian Bekker](https://i.stack.imgur.com/x0kyl.jpg?s=256&g=1)
Christian Bekker
Updated on July 09, 2022Comments
-
Christian Bekker almost 2 years
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?
-
clockw0rk almost 6 yearsPretty simple and good, however, I would like to add that you can use toggle() for ease of life