Question

I have some divs on a page that are hidden via jquery when the page loads up. Then the user can hide and show them via button clicks.

I have a button that opens up a print preview and media=”print” stylesheet that the print preview uses.

I want all the divs to show regardless of whether they are hidden or not when the print preview page is open. I can’t for the life of me figure out how.

I thought I could just have it shown in the print CSS like…

.headerContent > * {
    visibility: visible;   
}

Where header content is the parent of the hidden divs. This doesn’t work though.

jQuery is hiding the divs via .hide() which I believe just flips the visibility property as well.

Any ideas?

Answer 1

jQuery hide() uses display: none not visibility: hidden . You can read more on why this is so in this thread. To show the divs you can try the following css

.headerContent > * { 
 display: block;    
} 

Or you can use jquery selector and show all divs on print button click with this code

$(".headerContent").show();