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; }