Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Hide all elements except one div and its child element

Tags:

jquery

hide

How to hide all elements except one div and its child element using jquery?

like image 604
ANP Avatar asked Nov 25 '10 13:11

ANP


3 Answers

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();
like image 93
user113716 Avatar answered Nov 07 '22 04:11

user113716


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!

like image 31
Orbling Avatar answered Nov 07 '22 04:11

Orbling


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

like image 21
Starx Avatar answered Nov 07 '22 04:11

Starx