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

If you're trying to get the Accordion to expand for printing, why are you setting it to display:none; if the media is print? (as SLaks, display: hide; does nothing.)

Seems to me like you should actually be setting display to 'inline' or 'block' depending on it's usage through the rest of the page. A list-item defaults to 'inline' so if you haven't made a change in your CSS, then I'd set it to that.

Answer 2

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>