jQuery: How to Expand an Accordion for Printing CodeUnit 05 MAY 2010

The jQuery UI library brings with it a host of cool effects and elements to apply to your project, one of which is the pretty cool accordion effect that basically turns a whole lot of sequential divs into an “accordion” – allowing you to click on a header to expand the selected div while the reset of them contract to hide away.

I did however come across a little problem that needed solving the other day, namely that when printing an accordion page, only the currently open, in other words visible, accordion segment prints, leaving the rest of the closed segments hidden on the final printed page.

Obviously this isn’t particularly useful when you are printing something out and needs to be addressed – which it turns out to be a pretty simple thing to achieve after all.

So let’s look at the code to expand and print our accordion page then shall we?

	var answer = confirm ("Do you wish to print this page's contents?");
	if (answer) {

The function above is called when the user clicks on the print button or whatever other element you have associated with the print functionality. The first step is a simple modal dialog to ask whether or not the user really wishes to print the current page. If we get a positive answer, when then move to dealing with the accordion, in other words expanding it so that all the information elements are showing.

To do this is a simple matter of grabbing all content divs and forcing them to show. Yup, as simple as that. The second line attempts to make the page look a little neater by changing the currently open header to look the same as all the closed headers – just for consistency of look of course.

We then run the javascript print function which initiates the browser’s print functionality and after that action has been done and control is handed back to the browser tab, we go and close all the accordion segments to make the page all neat and tidy again.


So as you can see, it is a pretty simple matter of expanding all those neat little jQuery UI accordions of yours after all! :)

Related Posts:

About Craig Lotter

South African software architect and developer at Touchwork. Husband to a cupcake baker and father to two little girls. I don't have time for myself any more.

  • sam

    very useful code Craig, thanks. I’m a newby with jQuery :/ I wasn’t able to figure out which css file to add the code to. I have these files: jquery.mobile.structure-1.3.0.min.css, jquery.mobile.theme-1.3.0.min.css. Are you able to tell me where and how to add your code?

    • Hi Sam. The code snippet is javascript, so you would need to add it to either your main file or .js file being included. Simplest is to add it to the main file in a tag, sandwiched in a $(document).ready() call

      • sam

        cheers :)

  • alcopup

    Epic, love it, joined up just to say thanks :)