Question

I need to destroy a jQueryUI tabs when somebody tries to print the page.
I can’t hide it with CSS as I need the data from these tabs.

Can anyone help/point me in the right direction with this?
Perhaps there are other ways of achieving the same results?

By destroy i mean:

$('#tabs').tabs("destroy");

This has to work on IE7/8, as that is the browser used in the company.

Solution (Thanks to @Phil ):

//Destroys the tabs for print
window.onbeforeprint = destroyTabs;

//Remakes tabs after printing
window.onafterprint = makeTabs;


function makeTabs() {
    $('#tabs').tabs();
}

function destroyTabs() {
    $('#tabs').tabs('destroy');
}

Answer 1

This might work:

@media print {
    .ui-tabs-nav { display: none; }
    .ui-tabs .ui-tabs-hide { display: block !important; }
}

---

This is another shot in the dark (i haven’t tried it) but:

<script type="text/javascript">
     window.onbeforeprint = destroyTabs;

     function destroyTabs(){
       $('#tabs').tabs('destroy').tabs();
     }
</script>