Menu
How to hide all elements except one div and its child element using jquery?
604
To target a nested element and make sure it is the only one showing, you would need to hide its siblings, as well as the siblings of all its ancestors until the <body>.
Example: http://jsfiddle.net/patrick_dw/gSXYa/1/
$('#target').show().parentsUntil('body').andSelf().siblings().hide();
EDIT: The solution I added above is a little more concise.
Example: http://jsfiddle.net/patrick_dw/gSXYa/
var target = $('#target').show();
target = target.add(target.parentsUntil('body')).siblings().hide();
Ignore that, does not appear to have the desired effect.
Perhaps the following?
$('body').children().hide();
$('#mydiv').children().andSelf().show();
Update
The problem is, the visible state of a child DIV often relies on it's parent being visible. So you need to have an entire tree down to the DIV you want remaining visible.
You need to hide everything apart from that tree, the trick is identifying all children of the DOM structure that are not in the DIV ancestry, and all siblings of the ones that are.
Finally!
Managed to write a solution. Tried a recursive approach at first, but on complicated pages it died with "too much recursion", so wrote a list-based version that works just fine. It is in the form of a single-function jQuery plugin, as that seems to be the most useful approach.
(function($) {
$.fn.allBut = function(context) {
var target = this;
var otherList = $();
var processList = $(context || 'body').children();
while (processList.size() > 0) {
var cElem = processList.first();
processList = processList.slice(1);
if (cElem.filter(target).size() != target.size()) {
if (cElem.has(target).size() > 0) {
processList = processList.add(cElem.children());
} else {
otherList = otherList.add(cElem);
}
}
}
return otherList;
}
})(jQuery);
This routine finds all elements within the context (which defaults to <body>) that exclude the object and it's ancestors.
This would achieve the result of the question:
$('#mydiv').allBut().hide();
Another use could be to retain all objects within a container with a certain class, fading out all the others:
$('.keep').allBut('#container').fadeOut();
Bare in mind that the layout and positioning of any given element can depend heavily on surrounding elements, so hiding something like that is likely to alter the layout unless things are absolutely positioned. I can see uses for the routine anyhow.
However!
Another poster came up with the following which returns the same information using a routine already built-in to jQuery which I had not seen.
target.add(target.parentsUntil(context)).siblings();
or without the variable
target.parentsUntil(context).andSelf().siblings();
Which is a tad simpler, must scour documentation in future.
PS. If anyone has a better way of checking if a given jQuery object is equivalent to another than a.filter(b).size() != b.size() I would be very glad to hear it!
31
This will do $(".mydivclass").not(this).hide();
mydivclass is the class given to all the divs that needs to be hidden
Update:
$(".mydivclass").children().hide();
will hide all the children element inside .mydivclass
21
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
