Hide All Elements Except One Div for Print View

Hide all elements except one div for print view

If an element is not displayed, then none of its children will be displayed (no matter what their display property is set to).

* matches the <html> element, so the entire document is hidden.

You need to be more selective about what you hide.

How to hide all element on html page except one div using css?

You can use the pseudo-class ':not()'

<style>
   body *:not(.myDiv) {
        display: none;
    }
</style>

<div>1</div>
<div class="myDiv">2</div>
<div>3</div>

How do I hide everything except a div and all of its children?

N.B. This solution only works if .content-container is, itself, not a child of another element.

You will be able to achieve this effect by applying display: none to every element on the page and then over-riding that display specifically for .content-container and its children.

Example:

@media print {

  /* APPLY DISPLAY:NONE TO EVERYTHING */
  * {
    display: none;
  }

  /* OVERRIDE DISPLAY:NONE FOR .CONTENT-CONTAINER AND ITS CHILDREN */

  html,
  body,
  .content-container,
  .content-container * {
    display: initial;
  }

}

Where `.content-container` is a child of `main`

If .content-container is consistently a child of main, the same effect should be relatively easy to achieve with the following style rules:

html,
body,
main,
main .content-container,
.content-container * {
display: initial;
}

Working Example:

* {
  display: none;
}

html,
body,
main,
main .content-container,
.content-container * {
display: block;
}

<header>ABC</header>

<main>
  <h2>DEF</h2>
  <article class="content-container">
    <p>GHI</p>
    <p>JKL</p>
  </article>
</main>

<aside>
  <p>MNO</p>
<aside>

<nav>
  <ul>
    <li>PQR</li>
    <li>STU</li>
  </ul>
</nav>

Hide all elements except one, And show all elements again

Something like this? NB: make sure to give your hide link a unique ID.

Showing/hiding works well with jQuery show and hide methods, but since you wanted the elements to stay in their place, it is more suitable to use the visibility style attribute:

$('#hide').click(function () {

    // hide all in body except #e2, and #e2's parents.

    $('body *').not($('#e2').parents().addBack()).css({visibility: 'hidden'});

    return false; // cancel bubbling and default hyperlink effect.

});

$('#e2').click(function () { // click on #e2

    return false; // cancel bubbling -- ignore click.

})

$(document).click(function (e) { // click on document

    $('body *').css({visibility: 'visible'}); // show all in body.

});

div { border: 1px solid}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="e1">Element X1</div>

<div id="e2">Element 2X</div>

<div id="e3">Element X3</div>

<a href="/" id="hide">Hide</a>

CSS Print hide all elements but one

It depends on your DOM structure.

You'll want to hide every top level node (and therefore, their children) with CSS (display: none) except for the item you want to print and every parent element of said item (ie, you don't want to hide the top-level node that contains the item you want to print).

You could set this up (relatively) easily with some javascript--jQuery would help.

give the item(s) you want to print a class such as 'printThis'
assign every top level child of BODY a class that is set to display: none such as 'doNotPrint'
find the item you want to print (via the class 'printThis')
traverse your way up the DOM to each parent removing the class you applied to hide everything (and, possibly, applying the hide class to all siblings in the process)

Not tested, but run something like this on page load to set up your classes:

// to start, hide all top level nodes
$('body').children().addClass('doNotPrint')

// now we call this function passing in the 
// item to print
function showItem($node) {
    // remove the 'hide' class. This is moot
    // until we loop to the top level node, at
    // which point this takes affect
    $node.removeClass('doNotPrint');
    // we don't want to print the siblings
    // so we will hide those
    $node.siblings().addClass('doNotPrint')
    // now we check to see if this item has a parent
    // and, if so...
    if($node.parent().length){
        // ...we want to show the parent, hide its 
        // siblings, and then continue this process
        // back to the top of the node tree
        showItem($node.parent());
    } 
}

showItem($('.printThis'));

Then your Print CSS would have:

.doNotPrint {display: none;}

How to hide all div except the first?

The issue is that gt(0) is not a function. Presumably you meant get(0) but even that has issues as it will return a DOM Element which doesn't have a hide() method.

To achieve what you need, you can use the :gt selector to get all divs but the first and hide them:

$('div.ref_display:gt(0)').hide();

That being said you don't need JS/jQuery for this at all as it can be achieved in CSS alone:

div.ref { display: none; }

div.ref:first-child { display: block; }

<div class="col-md-6 ref">1</div>

<div class="col-md-6 ref">2</div>

<div class="col-md-6 ref">3</div>

Hide All Elements Except One Div for Print View