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>

Answer 2

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 3

this worked for me (put at the end of the CSS file where screen styles are)

.ui-accordion-content {
    display: block !important;
}

友情链接