Question

I’m trying to make a jQuery script that will hide all the visible elements on the page,
and then after someone hits a button, make all the elements that were hidden appear again.

I know I can use the .is(':visible') selector on every single divider and store the ones that are visible, then use .hide(); on all of those. Finally, I know I can then use .show(); on them again when someone clicks my button.

But I was wondering if there is a nicer way to do this.

I imagine hiding all elements in one sweep won’t be a big problem (possibly something like $(document).hide() will do it?)

But most importantly how do I store all the elements that were hidden in a nice way so I can restore them again?

Answer 1

Before you hide the elements, apply a class to all of them so you can identify them later:

// hide everything visible, except the button clicked
$('button#hideVisible').click(function() {
    $(':visible').each(function() {
        $(this).addClass("unhideable");
        $(this).hide();
    });
    $(this).show();
});

Alternatively, you don’t really need to use jQuery each in this specific case. You can simplify the jQuery function by combining the :visible selector with the jQuery not selector to exclude the button using the this value:

// much simpler version of applying an unhideable class and hiding visible elements
$('button#hideVisible').click(function() {
    $(':visible').not(this).addClass("unhideable");
    $(':visible').not(this).hide();
});

UPDATE:

However, while the above two solutions are great for scenarios where you don’t need user intervention to unhide elements, like in the case of an automated script, the problem with the above 2 examples is that they hide parent elements of the button, which means the button will be hidden, despite it not being explicit. If you require a user to click the button again in order to unhide elements, then the above two solutions are limited.

Thus, the next evolution of this function is to ensure that we exclude the parents using jQuery’s parentsUntil method:

$('button#hideVisible').click(function() {

    // if we're in the hide state, unhide elements and return
    if( $('button').hasClass('ancestors') == true ) {
        $(this).html("Hide");
        $('.unhideable').show();
        $('.unhideable, .ancestors').removeClass("unhideable").removeClass("ancestors");
        return;
    }

    // hide all children of the button. While this might not make sense for a button
     // it's helpful to use this on clickable DIV's that may have descendants!
    $('#hideVisible').find(':visible').addClass("unhideable");
    $('#hideVisible').find(':visible').hide();

    // put a class on button ancestors so we can exclude them from the hide actions
    $('#hideVisible').parentsUntil("html").addClass("ancestors");
    $('html').parentsUntil("html").addClass("ancestors");

    // let's not forget to include the button as well
    $(this).addClass("ancestors");

    // make sure all other elements on the page that are not ancestors and 
     // not descendants of button end up marked as unhideable too!
    $(':visible').not('.ancestors').addClass("unhideable");

    // nice debug output to give you an idea of what's going on under the hood
     // when the hide operation is finally called
    $(':visible').not('.ancestors, html').each(function() {
        console.info($(this).get());
    });

    // hide the remaining elements on the page that aren't ancestors,
     // and include the html element in the exception list as for some reason,
      // we can't add class attributes to it
    $(':visible').not('.ancestors, html').hide();        

    // change the button text to "Show"
    $(this).html("Show");

});​

Unhiding all unhideable elements:

Next, when you want to unhide them, simply call:

$('.unhideable').show();

Finally, if needed, you can clean up after yourself by calling:

$('.unhideable, .ancestors').removeClass("unhideable").removeClass("ancestors");

DEMO:

See this jsfiddle for a demonstration of this functionality.