jQuery Tabbed Area

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/"&gt;Link&lt;/a&gt;&lt;/li&gt;
</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.

Answer 2

Try this

<script>
$(function () {
    var tabContainers = $('div.tabs .tabContent');
    tabContainers.hide().filter(':first').show();
    $('div.tabs ul.tabNavigation a.tab').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();
    if(window.location.hash){
        $('a[href='+window.location.hash+']').click();
    }
});
</script>

<div class="tabs">
    <ul class="tabNavigation">
        <li><a href="#a" class="tab">A</a></li>
        <li><a href="#b" class="tab">B</a></li>
        <li><a href="#c" class="tab">C</a></li>
        <li><a href="http://www.google.com/"&gt;Link&lt;/a&gt;&lt;/li&gt;
    </ul>
    <div id="a" class="tabContent">AA</div>
    <div id="b" class="tabContent">BB</div>
    <div id="c" class="tabContent">CC</div>

</div>