Question

I have this code for a Tabbed area, but when a user clicks a tab the content snaps out and the new content fades in. I want to be able to have the content fade out and in. Also the tabs themselves fade between the active and inactive state but I don’t have any code for it is this default behaviour kicking in?

$(function () {
    var tabContainers = $('div.tabs > div');
    tabContainers.hide().filter(':first').show();

    $('div.tabs ul.tabNavigation a').click(function () {
     tabContainers.hide();
     tabContainers.filter(this.hash).fadeIn(2000);
     $('div.tabs ul.tabNavigation a').removeClass('selected');
     $(this).addClass('selected');
     return false;
    }).filter(':first').click();
   });


<div class="tabs">

<ul class="tabNavigation">
<li><a href="#a">A</a></li>
<li><a href="#b">B</a></li>
<li><a href="#c">C</a></li>
<li id="more"><a href="http://www.google.com/">Link</a></li>
</ul>

<div id="a"></div>
<div id="b"></div>
<div id="c"></div>

</div>

Also

I have tab that I would like to NOT tab the boxes but work as normal link, I tried adding an ID and then saying return true, but that didn’t work, how can I do this? Thanks

Edit

Would it also be possible to show the relevant content based on the hash if someone comes from an external page with the url like domain.com/#b and show the div with the id of b?

Answer 1

Try this:

http://jsbin.com/emici3/3/edit

A call back is added to the fadeOut to trigger the fade in.

Edit:

Added section to deal wish hash and select the correct tab.