jQuery Accordion - Need index of currently selected content part

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></开发者_如何学JAVAh3>
<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!

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');

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.

You can get the active index by using

ui.options.active

activate: function(event, ui)

please make use of activate method instead of change. It works fine for me.

try this :need the name of the accordion this is what i did. should work for the above html. hope it helps. better solution is give a id to the accordion header and fetch it directly.

    $("#accordion1").accordion({
        heightStyle:    "fill",
        activate: function( event, ui ) {
            var name =  ui.newHeader[0].childNodes[1].innerHTML;
            console.log(name);
        }
    });

Here's a practical example in WordPress Development, working with Widgets.

Say you have an accordion within a Widget form, and you want it to remember what "Settings Group" the user was in when they saved the Widget.

jQuery( document ).ready( function () {

    var current_settings_group = false;

    var do_widget_js = function ( $widget_id ) {

        var target = ".mbe-accordion"; // Your generic accordion selector

        if ( $widget_id ) {
            target = "#" + $widget_id + " " + target;
        }

        jQuery( target ).accordion( {
            collapsible: true,
            active: current_settings_group,
            heightStyle: "content",
            activate: function ( event, ui ) {
                current_settings_group = jQuery( this ).find( "h3" ).index( ui.newHeader[0] );
            }
        } );

    };

    do_widget_js();

    jQuery( document ).on( "widget-added widget-updated", function ( $event, $widget ) {
        do_widget_js( jQuery( $widget ).attr( 'id' ) );
    } );

} );