Question

I have a simple JQuery UI tabs menu working, and I set it up so that all the links except the first (Home) will expand/collapse, and clicking the “Home” item will just redirect to the same page.

    $("#tabs").tabs({
    collapsible: true,
    select: function(event, ui) {
        if (ui.index == 0){//home
            window.location.href = 'test.html';
        }
    }
});

Though this works, when The “Home” tab is active, and you click on any other tab for the first time, both tabs get the active class applied for some reason. This only happens the first time. Selecting the same tab or other tabs again does not cause that problem. I’m not sure how to troubleshoot this.

You can see the demo here

Answer 1

2 problems:

1. your href of “#” is causing errors
2. not having a reference for home seems to also cause errors.

http://jsfiddle.net/D7kqG/3/ seems to have the functionality you want– you’d just have to style the “home” div to have no height/width to look the way you want.

EDIT: would have expected this to work:

http://jsfiddle.net/D7kqG/4/

(i.e. collapse the home tab whenever it’s clicked) But it isn’t adding the class…

Alright, this should be exactly what you want:
http://jsfiddle.net/D7kqG/5/

It’s collapsing and expanding the content div automatically for the home tab.