Using .detach() with multiple ajax elements on a page

Question

I'm loading content from a database into a page with jQuery ajax. I have multiple divs of content, but would only like to view one div at a time.

I've managed to successfully detach the elements from the dom, but I can not figure out how to manage multiple divs so that only 1 div shows at a time (while the others remain detached).

Below is my code, here is a Fiddle: http://jsfiddle.net/XkzUK/

HTML:

<nav>
<ul id="site-nav">
<li class="nav1"><a href="#recent">Recent</a></li>
<li class="nav2"><a href="#highlights">Highlights</a></li>
</ul>
</nav>

<div id="content-listing">

<div id="recent">
<ul class="top-level">
</ul>
</div><!--end recent-->

<div id="highlights">
<ul class="top-level">
</ul>
</div><!--end highlights-->

</div><!--end content-listing-->​

JS:

var test; var test2
     //Recent $("#site-nav .nav1").on("click", function (event) {
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test === 'undefined') {
        test = $("#recent ul.top-level").load('/echo/html/', { html: '<li>1</li> <li>2</li> <li>3</li>' }, function () {
            //$(this).show().siblings().detach();
            alert("I'm new");
        });
    } else {
        test.appendTo("#content-listing");
        alert("I'm old");
    }
    event.preventDefault(); });

//Highlights $("#site-nav .nav2").on("click", function(event) {
    //test = $("#recent").detach();
    $("#site-nav li a").parents().removeClass("nav-active");
    $(this).addClass("nav-active");
    if(typeof test2 === 'undefined') {
        test2 = $("#highlights ul.top-level").load('/echo/html/', { html: '<li>Apples</li> <li>Oranges</li> <li>Pears</li>' }, function () {
            //$(this).show().siblings().detach();
            alert("I'm new");
        });
    } else {
        test2.appendTo("#content-listing");
        alert("I'm old");
    }
    event.preventDefault(); });​

CSS:

.nav-active,.nav-active a{background-color:#fff;color:#e84182 !important;outline:none;}
.sub-active,.sub-active a{background-color:#fff;color:#e84182 !important;border:dotted 1px pink;border-width:1px 0 ;margin:-1px 0;outline:none;/*background:url(/assets/img/icon-branch.png) 2% 5px no-repeat #fff;*/}

#content-listing{background-color:#ea528d;}/*230px*/
#content-listing ul.top-level ul li{margin-left:5.882352941176%}
#content-listing li a{font-size:.8125em;line-height:1em;text-decoration:none;padding:2px 0;display:block;text-indent:2.678571428571%;outline:none;}
.visited{color:#ccc;}

#content-listing ul{z-index:4;position:relative;}/*230px*/
#content-listing ul.top-level{margin-top:5.3125em/*85px*/;}
#content-listing ul.top-level ul li{margin-left:6.521739130435%;}
#content-listing{width:29.113924050633%;float:left;padding-bottom:20010px;margin-bottom: -20000px;}
#content-listing li a{text-indent:6.521739130435%;/*15px*/}​

And jsFiddle: http://jsfiddle.net/XkzUK/

Answer 1

If you want to fix this code, when attaching a tab body, you should also detatch the other tab if it has already been initialized.

if(test2) test2.detach()

A more generic code would be:

for(var i = 0; i < tabs.length; i++) {
    if(i != tabIndexToShow && tabs[i] != null) {
        tabs[i].detach()
    }
}

http://jsfiddle.net/nLMas/1/

BUT, you should seriously consider using JQuery UI tabs (for example) which does what you are trying to do.

And also, please, clean, indent and comment your code before posting here (or better, all the time ;=)