CODEWITHSUNDEEP
javascriptjquerytogglejquery-animate
Threaded
Threaded

Reputation: 71

How to Toggle Tabs with jQuery, without closing adjacent tabs.

Having a hard time figuring this one out. I have 3 tabs at the top of the page. On page load they are hidden. Each tab contains a piece of content. I want to click tab 1 and show tab 1's content, when I click tab 2, I want to display tab 2's content, etc. But, I also want to be able to click each respective tab a second time to hide the content associated.

So my desired effect is: click tab 1, show tab 1's content, click tab 2, show tab 2's content, click tab 2 again, hide tab 2's content. I've included the code I'm currently using; this hides the tabs correctly, expands them correctly, but does not toggle each tab if I click on its anchor element the way in which I desire. Any help is greatly appreciated. 

$('.tabs').hide();
    $('ul.tabs li a').click(function () {
        $('.content').show();
});

Upvotes: 1

Views: 6061

Answers (3)

JT Smith
JT Smith

Reputation: 741

Can also use .toggle()

$('.tabs').hide();
$('ul.tabs li a').click(function () {
    $('.content').toggle();
});

If your tabs are hidden on page load, you should put this in CSS display: none; then use the click event

$('ul.tabs li a').click(function () {
    $('.content').toggle();
});

If having problem still using toggle, then create a unique id for each tab and do this. The problem lies within the query:

$('ul.tabs li a').click(function() {
    $(this).toggle;
});

By using .content you are activating the parent element rather than its children

Upvotes: 0

Marc
Marc

Reputation: 11623

Within your click event for the tab itself, you want to do something like this for the subsequent click, so it'll hide/show when when the ACTIVE tab is clicked:

if ( $(this).hasClass("ui-state-active") ) {
    $(this).toggle();
}

(This solution assumes you're using jQuery UI tabs.)

Upvotes: 2

Francisc
Francisc

Reputation: 80455

I can't be sure until I see the HTML, but $('.content').toggle(); should work.

Upvotes: 1

Related Questions