7

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

ANP
  • 15,287
  • 22
  • 58
  • 79

4 Answers4

13

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();
user113716
  • 318,772
  • 63
  • 451
  • 440
7

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!

Orbling
  • 20,413
  • 3
  • 53
  • 64
  • It did? Hmm, must be particular to that case. In general it is not foolproof. – Orbling Nov 25 '10 at 14:14
  • Likely because `#mydiv` was a direct child of `body`. If that's the case, you could shorten it like this `$('body > :not(#mydiv)').hide();`. I added an answer that works for nested elements. – user113716 Nov 25 '10 at 14:39
  • @patrick I've added your answer in after mine, so that anyone reading it won't hop off to try it! Might be nice for people to see code illustrating the methods involved at anyrate. – Orbling Nov 25 '10 at 15:38
4

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

Starx
  • 77,474
  • 47
  • 185
  • 261
  • what if `mydivclass` has not mentioned only one `maindiv` with some elements and other div.. then how to hide. – Rafee Jan 12 '12 at 13:30
  • @Rafee, I am a bit confused... can you explain a bit more – Starx Jan 13 '12 at 08:01
  • want to hide all child elements in a `maindiv` and this `maindiv` has some `text` and other input fields and some other divs. – Rafee Jan 13 '12 at 08:44
  • @Mattis obviously this won't work: if you hide the parent of .mydivclass then .mydivclass will be hidden too... – Christophe Jan 09 '13 at 22:24
1

Simple solution: hide all and then show the one(in this case the second div and its children).

$('.create-account').children().hide();
$('.create-account>div:nth-of-type(2)').show();
Shishir Arora
  • 5,521
  • 4
  • 30
  • 35