CODEWITHSUNDEEP
jquery-uijquery-ui-accordion
Ten Sleep
Ten Sleep

Reputation: 1197

How to change default state for jQuery accordion tab

I'm using the jQuery accordion, but the first accordion tab is, by default, already expanded on page load. I tried adding the aria-selected="false" to the inline html, and I tried changing/removing this from line 6345 in jquery-ui.js, but the first tab is still expanded:

// make sure at least one header is in the tab order
if ( !this.active.length ) {
    this.headers.eq( 0 ).attr( "tabIndex", 0 );
} else {
    this.active.attr({
        "aria-selected": "true",
        tabIndex: 0
    })
    .next()
        .attr({
            "aria-expanded": "true",
            "aria-hidden": "false"
        });
}

Any pointers?

EDIT: new fiddle using the answer below: http://jsfiddle.net/pfeff/WNdRe/1/

Upvotes: 0

Views: 1753

Answers (1)

Ruben Kazumov
Ruben Kazumov

Reputation: 3892

Accordion jQuery-ui is working with the tabs visibility by changing CSS, but not class of content . Place this in code just after accordion initialization: 

$("#accordion div.ui-accordion-content").css({"display": "none"});// hide content block

UPD:

$(...).accordion({ collapsible: true, active: false });

UPD 2:

The best way to change original behavior of the original ui element -- create your own plugin or widget :)

http://jsfiddle.net/R8J5p/1/

Now you can use it like $(...).myAccordion();

Upvotes: 1

Related Questions