jQuery Deep-linked Nested Tabs

An example of using jQuery Tools to created nested tabs with history and browser location (deep-linking)

HTML

<script src="http://cdn.jquerytools.org/1.2.5/tiny/jquery.tools.min.js"></script>
  <h2 class="sm">Links</h2>
        <ul class="sitemap">
            <li><a class="sm" href="http://jsfiddle.net/zrE9E/11/shwow/#Before">#Before</a>
            <li><a class="sm" href="http://jsfiddle.net/zrE9E/11/shwow/#During">#During</a>
            <li><a class="sm" href="http://jsfiddle.net/zrE9E/11/shwow/#After">#After</a>                
        </ul>                    

<div class="Centered" id="TextContent">
  <div id="tabs_container">
    <ul id="tabs">
      <li>
          <div class= "Centered" id="TextContent2">
            <div id="tabs_container2">
              <ul id="tabs2">
                <li class="active">
                    <div class="LinkText TT1" id="BeforeTab"> <a class="icon_accept" href="#Before">Before</a></div>
                </li>
                <li><div class="LinkText TT2" id="DuringTab"> <a class="icon_accept" href="#During">During</a></div></li>
                <li><div class="LinkText TT3" id="AfterTab"> <a class="icon_accept" href="#After">After</a></div></li>
              </ul><!---Ends ul id "tabs" container2-->
            </div><!---Ends "tabs_container2"-->
          </div><!---Ends "Centered Text Content2"-->
      </li>
    </ul><!---Ends ul id "tabs-->
  </div><!---Ends "tabs-container"-->

  <div id="tabs_content_container">
    <div id="Before" class="tab_content">
      <p>Before: Just Some Content.</p>
    </div><!---Ends Before container-->
    <div id="During" class="tab_content">   
        <p>During: during the demo</p>
    </div><!---Ends "During"-->
    <div id="After" class="tab_content">            
      <p> After</p>
    </div>
  </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

html>body {
    background-color:#FFF;
    font-family:Calibri, Arial, "Trebuchet MS", sans-serif;
    color: #FFF;
    font-size:14px;
    margin:0;
    padding:0 0 0 1em;
    top:0
}
.sm {color: red; font-size: 32px;}
ul.sitemap li {color: red;}
a.sm:link {color: red;}
a.sm:visited {color: red;}
a.sm:hover {color: red;}
a.sm:active {color: red;}

.hide {  left:-999.9px;  position:absolute;  top:-999.9px  }

a:focus {  outline:0; font-size: 20px; }

a img {  border:0  }

a:link {   color:#FFF;   font-weight: normal;
        font-size: 20px; text-decoration:none
}

a:visited {   color:#FFF;   
       text-decoration:none  }

a:hover,hover a,a:active {  color:#FC0;   
          text-decoration:none }

p {
    color:#FFF;
    font-weight: normal;
    text-align: left;
    letter-spacing: 0;
    line-height: 21px;
    font-size: 14px;
}

h1 {
    font-size:20px;
    margin:0;
    padding:0 0 0 0;
    font-weight: normal;
}

h2 {
    font-size:18px;
    font-weight: normal;
    margin:0 auto;
    padding:0 0 0 0;
}


.YouAreIE {
position:absolute
}

.searchbar {
    display:inline;
    float:right;
    font-size:10px;
    height:3px;
    margin-bottom:0;
    margin-right:144px;
    margin-top:12px;
    padding:0;
    position:relative;
    z-index:-20
}

.button {
    left:4.5px;
    position:relative;
    top:5px;
}

.textfield {
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    background-color:#333;
    border-color:#333;
    border-radius:5px;
    border-style:solid;
    color:#999;
    margin-top:10px
}

#BG {
    color:#FFF;
    display:inline;
    left:0;
    padding:0;
    position:absolute;
    top:0;
    width:100%;
    z-index:0
}

.all{width:1100px;
    margin:0 auto;
    position:relative;
    height:auto;
}

.Centered {
    border:none;
    bottom:0;
    margin:0 auto;
    padding:0;
    position:relative;
    z-index:2
}


#TextContent {
    display:block;
    font:Calibri, Arial, "Trebuchet MS",...

JavaScript

$(document).ready(function () {

        //  When user clicks on tab, this code will be executed    
        $("#tabs li").click(function () {
            //  First remove class "active" from all tabs
            $("#tabs li").removeClass('active');
            //  Now add class "active" to the selected/clicked tab
            $(this).addClass("active");
            //  Hide all tab content
            $(".tab_content").hide();

            // this returns the full url - but we only need the hash
            selected_tab = $(this).find("a").attr("href");
            if (window.location.hash) {
                // this gets the hash for exmample #After
                window.location.hash = "#" + this.id;
            }
            //  Show the selected tab content
            $(selected_tab).fadeIn();

            //  At the end, we add return false so that the click on the link is not executed
            return false;
        });

        if (window.location.hash) {
            var wndHash = window.location.hash;
            var tab = wndHash + "Tab";
            // if hash exist on doc ready then remove class "active" from all tabs        
            $("#tabs li").removeClass('active');
            // show the tab content and make tab active
            $(wndHash).fadeIn();            
            $(tab).parent().addClass("active");
            console.log(wndHash, $(wndHash), tab, $(tab));
        } else {
            $("#Before").fadeIn();            
            $("#BeforeTab").parent().addClass("active");
        }
    });