Turn off Jquery UI Accordion animation only during page load

Question

I'd like to turn off the accordian animation during page load, and then turn it back on after the page is loaded.

Basically I've got multiple forms inside the accordion sections and when submitted the page gets reloaded and the relevant section is reloaded. But during the reload the animation is triggered which looks a little ugly. But I like it when the page is not being loaded.

How do I achieve this effect?

Answer 1

If the page reloads after a submission then the whole JS script will be reloaded as well, therefore, any variable containing any kind of data will be reset to the default value. The only way I can think this could be done is having a variable set by your server side languaje in the javascript script after it receives a submission.

In JS when you load the page do

var = false; //false = no open tabs
$( ".selector" ).accordion( { ..., active: var } );

On submission make PHP, assuming you're using it, do:

$my_tab_number = n;
var = <php echo $my_tab_number; ?>;

So when the page gets reloaded it will be opened in the tab you want.

Answer 2

To answer my own question. The following worked.

What I found was that when creating the accordion object, you define no animation first. Then, select what section you want displayed at load time. In my case my Kohana controller retrieves this from a session variable set by the previous form submission. It then gets passed into the template containing this code.

After thats done, set the animated setting to slide and it's all go from there.

 $(function(){
      /* Create the accordion object first */
      $("#accordion").accordion({ animated: false, header: "h3", autoHeight: false, clearstyle: true, collapsible: true })

      /* get the section to load. This is set by the previous form submission and saved to a session variable. */ 
      var id = <?php echo $sectionId; ?>;

      /* activate on sectionId=0 causes it to close (which is by design) this gets around it */
      if (id != 0) {
        $("#accordion").accordion("activate", id);
      }

      $("#accordion").accordion("option", {animated: "slide" });

    });