Printing MooTools Accordion Items

By  on  
MooTools Accordion

Sometimes we're presented with unforeseen problems when it comes to our JavaScript effects. In this case, I'm talking about printing jQuery and MooTools accordions. Each "closed" accordion content element has its height set to 0 which means it will be hidden when the user tries to print the page. Luckily MooTools Core Developer Thomas Aylott provides a simple fix.

The CSS Fix

@media print {
	.element { height:auto !important; }
}

That's it -- no joke. Setting a print-specific height of auto with the ever-useful !important declaration fixes everything.

Big ups to @subtlegradient for the solution. Another reason I'm so happy to be surrounded by clever developers.

Recent Features

  • By
    CSS Gradients

    With CSS border-radius, I showed you how CSS can bridge the gap between design and development by adding rounded corners to elements.  CSS gradients are another step in that direction.  Now that CSS gradients are supported in Internet Explorer 8+, Firefox, Safari, and Chrome...

  • By
    CSS vs. JS Animation: Which is Faster?

    How is it possible that JavaScript-based animation has secretly always been as fast — or faster — than CSS transitions? And, how is it possible that Adobe and Google consistently release media-rich mobile sites that rival the performance of native apps? This article serves as a point-by-point...

Incredible Demos

  • By
    Fixing sIFR Printing with CSS and MooTools

    While I'm not a huge sIFR advocate I can understand its allure. A customer recently asked us to implement sIFR on their website but I ran into a problem: the sIFR headings wouldn't print because they were Flash objects. Here's how to fix...

  • By
    CSS Transforms

    CSS has become more and more powerful over the past few years and CSS transforms are a prime example. CSS transforms allow for sophisticated, powerful transformations of HTML elements.  One or more transformations can be applied to a given element and transforms can even be animated...

Discussion

  1. wow… that is really enlightening. thanks for sharing

  2. Anton Samper

    I tell you what, i don’t have a use for this right now, but it’s one of those things that will undoubtably drive me crazy in the future. Very nice dude, i’ll keep it mind.

  3. Thanks for posting about print stylesheets – they are something which are all too often overlooked, but a very important part of web development in my opinion.

  4. So simple… Thanks for the tips.

  5. Gui
    @media print {
    .element { display:inline !important; }
    }
    

    should also work

  6. David

    I’ve recently run up against this problem. The script provided works fine, but as far as I can tell, you can’t use the opacity effect with the accordion.

    I’ve added:

    body div.element {
    height:auto !important;
    display:inline !important; 
    opacity:1 !important;
    filter:alpha(opacity=1); !important;  }
    

    To my print css, but it doesn’t fix the problem. If anybody knows of a solution, then I’m certainly listening. :)

  7. john

    (Accordion mootools)…can be linked to any part of which is not active? How? I thank you in advance

  8. Francisco

    @David: The same problem. Height:auto works but no text is show.

  9. Thanks for this was bugging me for ages. The text was disappearing for me too but the “display:inline !important” seems to fix it (Thanks to Gui).

    Saf

  10. Michelle

    Neither of the fixes presented here have worked for me. Only the section headline shows up on print.

  11. If anyone still comes across this problem: only the following code helped me (jQuery Accordion):

    .ce_accordion { display: block !important; height: auto !important; }

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!