title: How would I use a function to programmatically control which jquery-ui "accordion" panel should open?
body: <h1>QUESTION:</h1>
  
  <p>How would I use a function to programmatically control which jquery-ui "accordion" panel should open?</p>
  
  <p>Thanks for any help/guidance!</p>
  
  <p><em><strong>NOTE: Below, are some examples of what I've tried to open the accordion panel using a function are shown below.</em></strong></p>
  
  <p>--Unfortunately, none of these work.</p>
  
  <p><strong>(jquery 1.8.0,  jquery-ui  1.8.23)</strong></p>
  
  <h1>1.</h1>
  
  <pre><code>    $('#abc').accordion(
      {
          active: false,
          icons: false,
          collapsible: true,
          animated: true,
          navigation: true,
          event: "click keyup",
          create: function(event, ui) {      
              $("#abc").accordion( "option" , "active" , getAindex() );
          }            
      }); 
  </code></pre>
  
  <h1>2.</h1>
  
  <pre><code>    $('#abc').accordion(
      {
          icons: false,
          active: function(event, ui) {   
              return getAindex();
          },
          collapsible: true,
          animated: true,
          navigation: true,
          event: "click keyup"
      });     
  </code></pre>
  
  <h1>3.</h1>
  
  <pre><code>    $('#abc').accordion(
      {
          icons: false,
          active: getAindex(),
          collapsible: true,
          animated: true,
          navigation: true,
          event: "click keyup"
      });     
  </code></pre>
  
  <h1>The "getAindex()" function looks like this...</h1>
  
  <pre><code>    function getAindex()
      {
          var idx = 0;
          var jqXHR2 = $.ajax({
              type: "GET",
              url: 'getAindex',
              async: false,
              cache: false
          })
          .done(function(data, textStatus, jqXHR)
          {
              idx = data
              $("#aindex").val(idx);
          })
          .fail(function(jqXHR, textStatus, errorThrown)
          {
              alert("FAIL:  getAindex: jqXHR:" + jqXHR + "...textStatus:" + textStatus + "...errorThrown:" + errorThrown");
          });
  
          return idx;
      }
  </code></pre>
  
  <h1>The HTML looks like this...</h1>
  
  <pre><code>    &lt;div id="abc"&gt;
          &lt;h3&gt;tabA&lt;/h3&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;span&gt;tabA-content1&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;span&gt;tabA-content2&lt;/span&gt;
              &lt;/div&gt;              
          &lt;/div&gt;
          &lt;h3&gt;tabB&lt;/h3&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;span&gt;tabB-content1&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;span&gt;tabB-content2&lt;/span&gt;
              &lt;/div&gt;              
          &lt;/div&gt;
          &lt;h3&gt;tabC&lt;/h3&gt;
          &lt;div&gt;
              &lt;div&gt;
                  &lt;span&gt;tabC-content1&lt;/span&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;span&gt;tabC-content2&lt;/span&gt;
              &lt;/div&gt;              
          &lt;/div&gt;
      &lt;/div&gt;      
  </code></pre>
  
  <h1>The "fixed" accordion definition...</h1>
  
  <pre><code>    $('#abc').accordion(
      {
          active: getAindex(),
          icons: false,
          collapsible: true,
          animated: true,
          navigation: true,
          event: "click keyup",
          change: function(event, ui) {              
              if (ui.options.active !== false)
              {
                  setAindex(ui.options.active);
              }
          }          
      }); 
  </code></pre>
  
  <h1>The "fixed" Aindex() function...</h1>
  
  <pre><code>    function getAindex()
      {
          var idx = 0;
          var jqXHR2 = $.ajax({
              type: "GET",
              url: 'getAindex',
              async: false,
              cache: false
          })
          .done(function(data, textStatus, jqXHR)
          {
              idx = parseInt(data);    //  &lt;== NOTE:  added this...
              $("#aindex").val(idx);   
          })
          .fail(function(jqXHR, textStatus, errorThrown)
          {
              alert("getAindex() - FAIL:  jqXHR:" + jqXHR + "...textStatus:" + textStatus + "...errorThrown:" + errorThrown);
          });
  
          return idx
      }
  </code></pre>