Question

If I wanted to hide all elements except for those within a <div id="content"> (including div#content itself), I could use the following CSS:

*
{
    visibility: hidden !important;
}

div#content, div#content *
{
    visibility: visible !important;
}

One thing to note about this solution is that the hidden elements still take up space. Unfortunately, not all elements have the same display attribute, so you cannot simple simply replace visibility above with display.

Using JavaScript, how can I set all elements to that are not within the <div id="#content"> ‘family’ to display: none?

Answer 1

A general purpose solution to change the style on the fewest objects, but make sure that #content and all it’s sub-elements are visible requires an algorithm to traverse up from #content and hide all siblings at each level up without ever hiding an ancestor of #content. Because this starts at #content and goes up, it never hides any elements inside of #content.

function hideAllExcept(id) {
    var el = document.getElementById(id);
    while (el && el != document.body) {
        // go one level up
        var parent = el.parentNode;
        // get siblings of our ancesotr
        var siblings = parent.childNodes;
        // loop through the siblings of our ancestor, but skip out actual ancestor
        for (var i = 0, len = siblings.length; i < len; i++) {
            if (siblings[i] != el && siblings[i].nodeType == 1) {
                // only operate on element nodes
                siblings[i].style.display = "none";
            }
        }
        el = parent;
    }
}

hideAllExcept("content");

Caveat: this first version does not hide text nodes that are siblings of an ancestor of #content (all other text nodes outside of #content are hidden because their parent is hidden). To hide those text nodes too, they would have to get wrapped in a <span> tag so the style could be set on the <span> tag, but I don’t know if the OP needs that level of complexity or wants the text nodes wrapped in that way.

For completeness, here’s a version that will wrap parent sibling text nodes so they can also be set to display: none. This may or may not be needed depending upon the source HTML:

function hideAllExcept(id) {
    var el = document.getElementById(id);
    while (el && el != document.body) {
        // go one level up
        var parent = el.parentNode;
        // get siblings of our ancesotr
        var siblings = parent.childNodes;
        // loop through the siblings of our ancestor, but skip out actual ancestor
        for (var i = 0, len = siblings.length; i < len; i++) {
            var node = siblings[i];
            if (node != el) {
                if (node.nodeType == 1) {
                    // only operate on element nodes
                    node.style.display = "none";
                } else if (node.nodeType == 3) {
                    // wrap text node in span object so we can hide it
                    var span = document.createElement("span");
                    span.style.display = "none";
                    span.className = "xwrap";
                    node.parentNode.insertBefore(span, node);
                    // Be wary of the dynamic siblings nodeList changing 
                    // when we add nodes.  
                    // It actually works here because we add one 
                    // and remove one so the nodeList stays constant.
                    span.appendChild(node);
                }
            }
        }
        el = parent;
    }
}

hideAllExcept("content");​

And a working demo: http://jsfiddle.net/jfriend00/yVWDx/