Dynamically updating accordion content

Dynamically updating accordion content

I am developing a web-based application using jQuery for much of my interface. I just started using jQuery this week. I am using an accordion widget to power my sidebar. The content of the sidebar is dependent on the permissions given to the particular user. The authentication is handled via AJAX and then the sidebar content is generated dynamically by loading in html generated by a php file.

The problem is that while this works when the sidebar is generated on load, it doesn't apply all the styling necessary when it is generated after load. I understand this has to do with the rewriting functions not being called.

The solution I came up with was to load the accordion, destroy the accordion, then rebuild it on a delay, like this:
  1. $( "#accordion" ).load( "ajax/rolenav.php" );
  2. $( "#accordion" ).accordion( "destroy" );
  3. setTimeout( '$( "#accordion" ).accordion()',100);
While this is functional, the problem is that the unformatted content shows up for a split second before it's replaced by the proper accordion. What I would like to know is if there is a more elegant way to accomplish the same thing. I understand that ideally, I would just reload the whole page, but part of the functionality is eventually going to involve the accordion updating with task-specific options in sync with a tab widget, and if I have to reload the entire page to get the accordion to work, that's going to defeat the whole purpose.