Question

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();
});

Answer 1

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.)