jquery Accordion "destroy" not working

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");