Detecting jquery-ui accordion open / close state

Question

How do I conditionally handle when an accordion section is open. What I am asking is this (in pseudo code):

if (this-accordion-section-open){
   do something         


        

Answer 1

following code return you the active panel,

var active = $( ".selector" ).accordion( "option", "active" );

Answer 2

The basic HTML structure of the accordion is:

<h3>
    <a>...</a>
</h3>

The way I have done it in the past is to assign a class to the tag like so:

<h3>
    <a class="my_accordion">...</a>
</h3>

jQuery UI assigns different classes to the tag based on its state.

if($('.my_accordion').parent('h3').hasClass('ui-state-active')) {
    // accordion is open
}
else {
    // accordion is closed
}

Answer 3

from the demo site, I noticed there's a ui-state-active class on opened section. So you can use jQuery.hasClass for your code...

Answer 4

Although the Accordion control is a jquery UI component you don't have to use jquery to verify the control is in its expanded state. A simple check like this will do:

/**
* returns true if the elt is a header tag of an accordion control
* that is in the active state (expanded)
* @param {HTMLElement} elt - one of the header elements of the accordion div
*/
function isActive(elt){
    elt.classList.contains('ui-state-active');
}

if you WANT to use jquery you can do this:

$('query-string').hasClass('ui-state-active');

Answer 5

Solution for the current clicked link is activate:

HTML Code

<div id="accordion">

    <div>
        <h2><a href="#services">Services</a></h2>
        <p>More information about all of these services</p>
    </div>

    <div>
        <h2><a href="#about">About</a></h2>
        <p>About us</p>
    </div>

</div>

Jquery Code:

<script type="text/javascript">
$(function(){
$("#accordion").accordion({ header: "h2", navigation: true });
});
</script>