Hide all elements except one div for print view

Answering because I found this question while searching for this

Instead of 'display: none' you can use :

* {
  visibility: hidden;
  margin:0; padding:0;
}

#printableArea * {
  visibility: visible;
}

source : https://www.concrete5.org/community/forums/5-7-discussion/need-to-print-a-certain-div-and-ignore-everythign-else-on-the-pa

If you want to use JavaScript, you can try this simple snippet that doesn't even require jQuery:

document.body.innerHTML=document.getElementById('printableArea').innerHTML;

make a div wrap everything after the body tag. Before the wrap div, put the visible item's div.

I had to do this to make a simple username-password page, and needed to hide everything, except the half-opaque sign-in form's background. So, after the correct credentials were typed in, the form would animate out, and the half-opaque page cover would animate out, and finally, EVERYTHING aside would show up and you could use the page normally.

@media print {
    * {
        visibility: hidden;
    }

    /* Show element to print, and any children he has. */
    .svgContainer, .svgContainer * {
        visibility: initial;
    }
}

Make sure any children elements are also visible. Remember that invisible elements still influence positionning of other elements in the page. In my (simple) case, I just added position: fixed; on .svgContainer (somewhere else).

Simply you can use the following code and assign "hide" class to that specific element you dont want to display on print page

<style type="text/css" media="print">
    img
    {
        display:none;
    }
    .hide
    {
        display:none;
    }

</style>

There is another clean way to achieve this:

* {
    visibility: hidden;
}

#printableArea {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}

That way you're going to get only the #printableArea element in the print view and all of the other elements will be hidden.