Question

I’m using jQuery Accordion and would like to make a printable page where all the ‘accordions’ are expanded. I found the .accordion( ‘destroy’ ) option. However, when I implement it only the existing visible div is show after click the destroy button. Any help would be appreciated.

<link type='text/css' href='/js/theme/ui.all.css' rel='Stylesheet' />    <script type='text/javascript' src='/js/jquery-ui-personalized-1.6rc6.js'></script> <script type='text/javascript'> $(function(){ // Accordion $('#accordion').accordion({ header: 'h2', autoHeight: false, animated: false });   //attach click hander to button         $('#accordionKiller').click(function() {   //destroy the accordion $('#accordion').accordion('destroy'); });  }); </script>   <a id='accordionKiller'>Printable version</a>   <div id='accordion'>  <div>     <h2><a href='#'>Services</a></h2>     <div class='services'>      </div> </div> </div> 

Answer 1

After you call the accordion destroy, you need to set the content divs to be visible.

Based on the page you linked to I would add this before the $(‘#accordion’).accordion(‘destroy’) line:

$('.ui-accordion-content').css('display', 'block');