Possible to print list items hidden by Jquery "slideup" function

Question

i'm trying to get this accordion to expand when printed. the code degrades gracefully when javascript is turned off, but it just doesn't expand when printing.

here's a demo of it so you can see how it works: http://evanmoore.webs.com/test.htm

thank you so much for your help!

below is the code:

<style type="text/css">
@media print {
    .accordionContainer ul li {
        display: block;
    }
}
</style>

<script src="http://visualjquery.com/jquery-1.2.6.js" type="text/javascript"></script>

<script type="text/javascript">
//<!--
$(document).ready(function() {
var intDefaultOpenIndex = 0;
$(".accordion li h2").next().slideUp(100);
$(".accordion li").eq(intDefaultOpenIndex).addClass("expanded").children("h2").next().slideDown(100);
$(".accordion li h2").click(function() {
if ($(this).parent().hasClass('expanded'))  {
$(this).parent().removeClass('expanded').find("ul").slideUp(100);
$(this).parent().removeClass('expanded').find("p").slideUp(100);
} else {

$(".accordion .expanded ul").slideUp(100).parent().removeClass('expanded');
$(this).parent().addClass('expanded').find("ul").slideDown(100);
$(".accordion .expanded p").slideUp(100).parent().removeClass('expanded');
$(this).parent().addClass('expanded').find("p").slideDown(100);
$(".accordion .expanded form").slideUp(100).parent().removeClass('expanded');
}

});
});

//-->
</script>

<div class="accordionContainer">

<ul class="accordion">

 <li><h2>Title 1</h2>
  <ul>
   <li>Content 1</li>
   <li>Content 2</li>
   <li>Content 3</li>   
  </ul>
 </li>

 <li><h2>Related Programs</h2>
  <p>content 1</p>
 </li>
 <li><h2>Why APU</h2>
  <p>content 3</p>
 </li>
 <li><h2>About the University</h2>
  <p>content 4</p>
 </li>
</ul>

</div>

Answer 1

You need to add !important to force the CSS rule to override the style property, like this: (Untested)

<style type="text/css">
@media print {
    .accordionContainer ul li {
        display: block !important;
    }
}
</style>