printing div that is originally set to display:none;

Question

I have a div that is viewable if you click the appropriate link, using jQuery's slideToggle to display it.

It has

$(document).ready(function() {
    $('#content-click').click(function() {
        $("#content").slideToggle(100);
    });
});

<div id="content" style="display:none;">
    this is the content
</div>

In the print css, I thought maybe setting #content to #content { display: block; } would do the trick, but no luck.

Any help is appreciated.

Answer 1

You need to move the display:none declaration from being inline to being in your regular stylesheet. The reason your print stylesheet is not showing the div when printing is that its being overriden by the inline style.

Answer 2

The contents of the element's style attribute will override anything in the CSS. You should specify display: block; in the style attribute, or have no style attribute at all and instead specify display: none; in the non-print CSS.

Answer 3

I'm gonna screw up the syntax of this a bit, but basically:

@media print
{
   #content { display: block; } 
}

@media screen
{
   #content { display: none; } 
}

And remove the inline style from the DIV element