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

Question

Hi,

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

Yes.

On load add a class (e.g. "hideme") to all relevant DIVs like so:

$('div#accordion> div').addClass('hideme');

NB: This means that the accordion degrades fine when JavaScript is disabled.

In this way you can have your regular stylesheet specify the "hideme" class like this:

.hideme { display: none; }

While your print stylesheet can specify the "hideme" class like this:

div.hideme { display: block; }

Next, in the 'click' function you add to each H3, after sliding up the DIVs, add the "hideme" class and then remove the "style" attribute from each DIV that was slided up.

The overall jQuery for this looks like this:

<script type="text/javascript">
 //<![CDATA[
    $(function() {
        $('#accordion> div').addClass('hideme');

        $('#accordion> h3').click(function() {
          $(this).next('div:hidden').slideDown('fast').siblings('div:visible').slideUp('fast', function(){ $('#accordion> div:hidden').addClass('hideme').removeAttr('style'); });

      });
    });
 //]]>
</script>

Note the need to include the function callback in the slideUp function so that the style and class changes occur after the DIV has slided up and jQuery has added "style=display:none;"

Answer 2

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 3

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 4

{ display:block !important; } works in FF, but I read somewhere that it wouldn't work with ie6. Is there no javascript event for printing? I remember looking extensively for one before and couldn't find one, it seems insane that this doesn't exist, js seems to know when anything else happens inside the browser, but is blind to printing for some reason :(

brent @ mimoYmima.com