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

Bruce’s Google Law – it doesn’t matter how long you struggle for, 1 minute after posting your question Google will finally offer up the answer.

  function(event, ui) { 
  var index = jQuery(this).find("h3").index(ui.newHeader[0]);
  alert('bob ' + index);
  }})});

Oh well, maybe this’ll help someone else down the road.