jQuery Accordion - Need index of currently selected content part

Question

I have a simple menu on a web page, based on the jQuery Accordion. I have simplified the code somewhat, and it looks like this;

<div id="menu_div" class="nt-tab-outer nt-width-150px">

<h3 class="nt-tab-title"><a href="#">Menu A</a></h3>
<div id="menu_1_div">
  <a href="itemA1">Item A1</a><br />
  <a href="itemA2">Item A2</a><br />
</div>

<h3 class="nt-tab-title"><a href="#">Menu B</a></h3>
<div id="menu_2_div">
  <a href="fTabsDyn">Item B1</a><br />
  <a href="fPlainDyn">Item B2</a><br />
</div>

</div>

<script type="text/javascript">
jQuery(function() {
 jQuery("#menu_div").accordion({
  active: 1,
  change: function(event, ui) { 
      alert('bob');
  }})
});

</script>

This sets the 2nd "part" of the accordion open when the page opens. (active:1) and if either of the headers is clicked a simple alert "bob" pops up. So far so good.

Now I'd like to replace "bob" with the index of the header. So the "read" version of "active". ie, when the first accordion header is clicked I get 0, and if the second header is clicked I get a 1.

(Aside, of course I don't really want to do an Alert, I want to make an Ajax call to the server with the value, so the server knows which menu is open at the client. That part I can do, but I'm struggling to get the right value to send. If the index is not available then feel free to offer alternate suggestions).

Thanks!

Answer 1

From the jquery UI documentation as available at the JQuery UI web site:

//getter
var active = $('.selector').accordion('option', 'active');

or in your case

var active = jQuery("#menu_div").accordion('option', 'active');