Is it possible to print a DIV that is hidden by jQuery's "slideUp" function

Question

I have a simple "accordion" type page containing a list of H3 headers and DIV content boxes (each H3 is followed by a DIV). On this page I start with all DIVs hidden. When a H3 is clicked the DIV directly below (after) is revealed with jQuery's "slideDown" function while all other DIVs are hidden with the "slideUp" function.

The "slideUp" function inserts the following inline style into the specified DIVs:

style="display: none;"

I am wondering if there is any way for me to show all the DIVs expanded when a user prints the page (as I do when a user has JavaScript disabled).

I am thinking it is impossible because the inline style will always take precedence over any other style declaration.

Is there another solution?

Solution

Sugendran's solution is great and works in the browsers (FF2, IE7 and IE6) I've tested so far. I wasn't aware there was any way to override inline styles which I'm pretty sure is something I've looked up before so this is great to find out. I also see there is this answer here regarding this. I wish search wasn't so difficult to navigate here :-).

Lee Theobald's solution would be great but the "slideUp" function adds the style="display:none;" bit.

My solution works fine, but is overkill when the !important declaration works.

Answer 1

You can use the !important clause in CSS. This will override the inline style.

So if you setup a print media stylesheet - you can do something like

div.accordian { display:block !important; }

Answer 2

I'd personally do this in a different way. Instead of the JQuery adding the inline style, why not get it to add a class instead?

<div class="closed">...</div>

Then you can have two stylesheets: One for the screen, one for print:

<link href="screen.css" rel="stylesheet" type="text/css" media="screen,projection"/>
<link href="print.css" rel="stylesheet" type="text/css" media="print"/>

In your screen.css you'd define closed...

div.closed { display: none; }

But in your print.css you wouldn't (or you'd leave out the display:none). This way when it comes to printing all divs will be expanded but on screen, they'd be closed.

Answer 3

Making 'display as block' all the elements inside the accordion will cover all the divs inside.

#accordion > *{ display:block !important; }