CODEWITHSUNDEEP
jqueryaccordion
Mythul
Mythul

Reputation: 1807

How to get the Header id and Div id of an Accordion jQuery?

I have a simple accordion, where each header has its own id, and div has its own id.

How do I create an object that gets the current selected header id, or div id?

<div id="mainDiv">
    <h6 id="myAttributes">Attributes</h6>
    <div id="divAttributes">
    </div>

    <h6 id="myConstants">Constants</h6>
    <div id="divConstants">
    </div>
</div>
</div>

I am stuck at:

jQuery(function () {
    $("#mainDiv").accordion({
        activate: function () {

        }
    });
});

Thank you.

Upvotes: 1

Views: 7090

Answers (2)

XCS
XCS

Reputation: 28147

On activate get the element with the class .ui-accordion-header-active, which is automatically added by accordion.

jQuery(function () {
    $("#mainDiv").accordion({
        activate: function () {
                  alert($('.ui-accordion-header-active').attr('id'));
        }
    });
});

Demo: http://jsfiddle.net/3jHwC/1/

Using the same selector you can actually get the active header from outside the accordion's triggered events: $('#mainDiv .ui-accordion-header-active')

Upvotes: 5

mishik
mishik

Reputation: 10003

activate option function gets two arguments event and ui: http://api.jqueryui.com/accordion/#event-activate

You can then get all the data from ui:

activate: function (event, ui) {
    console.log(ui.newPanel[0].id);
}

Upvotes: 4

Related Questions