Skip to content Skip to sidebar Skip to footer

Jquery Accordion - Open Specific Section On Pageload

I have a rather basic implementation of a jQuery Accordion on a page (using 1.3.2, jQuery UI Core 1.72 and jQuery UI Accordion 1.7.2), and I wish to open the 2nd section when the p

Solution 1:

$("#accordion").accordion({ active: 2, event: "mouseover" });

Should do the trick!

UPDATE

if that doesn't work, try

$("#accordion").accordion({  event: "mouseover" }).activate(2);

(N.B. this is updated to be a bit faster, thanks for the comments. To be honest, it should work with the 'active: 2' parameter, don't know why it didn't.)

Solution 2:

proper way to open a specific tab:

$("#accordion").accordion({collapsible  :true,active       :false,heightStyle  :"content",navigation   :true});

Set the option:

//$("#accordion").accordion('option', 'active' , "INSERT YOUR TAB INDEX HERE");$("#accordion").accordion('option', 'active' , 1);

or you could work with a hash like this:

if(location.hash){

    var tabIndex = parseInt(window.location.hash.substring(1));     
    $("#accordion").accordion('option', 'active' , tabIndex);

}

Vote if you use ;)

Thanks

Solution 3:

Does the following work?

$(function() {
    $("#accordion").accordion({
        event: "mouseover",
        collapsible: true,
        active: 2
    });

});

Solution 4:

Try

$("#accordion").activate(index);

Solution 5:

I have resolved this question a little different since I had to create a menu.php which we include I have included every single page. In our project there was 1 accordion (a menu element with 2 submenus). So when the visitor is on the submenus, the accordion is open and the selected link (which are highlighted using CSS, not jQuery) active. But when the visitor is on a different page, the accordion works normally.

Here's the javascript:

var containsParams = /teacher|student/i.test(window.location.href), //regexp with string params
accordion = $("li.accordion"); // the accordion as a global

accordion.accordion({ //accordion setup on every page
    animated : !containsParams,
    active : containsParams,
    collapsible : true,
    event : "click",
    header : "h2"
});

//I like to use "self calling methods" since many times I need a main onload event and this way it's clear for every page and my main function still remains
(function () {
    if (containsParams) accordion.accordion("activate", 0);
})();

Hope you like it. =]

Best regards! =]

Post a Comment for "Jquery Accordion - Open Specific Section On Pageload"