Javascript Content Pane

I'm fond of any trick that can replace javascript functionality in a web page with pure CSS/HTML.  Probably the best example of a CSS javascript replacement is the Suckerfish Dropdown menu at HTMLDog, which I routinely use in my sites.  Anyway, I was poking around today for a way to prevent a javascript content switcher from jumping around based on the hash tag, and I found this sweet CSS content switcher.  It works by setting a fixed size wrapper element (ul or div), then setting the nested elements to match the size.  When you target the id of the display element with any link on the page, the content shifts inside the frame to whichever element you're looking for. 

Unfortunately, the project I'm working on now can't use a fixed-size div, since the content is dynamically generated, but the concept is pretty sweet regardless.  It's definitely something to add to my bag of tricks. Incidentally, if you are looking for a way to keep the hash anchor in the URL while using tab-style javascript navigation in a content switcher, I found that if I set the hash name at window.location.hash manually, then added a space, it would allow you to keep the current "tab" value in the URL but prevent the big jump when the browser tries to follow an anchor. 

function showMe(li) {  
var divsToHide = document.getElements("div.widget_display");  
var divNameToShow = li.id.split("_tab");  
  
if(document.getElementById(divNameToShow[0])) {  
     document.getElements("li.current").removeClass("current");  
     li.addClass("current");  
for(var i=0;i<divsToHide.length;i++) {  
     //Mootools function  
     divsToHide[i].addClass("hidden");  
}  
document.getElementById(divNameToShow[0]).removeClass("hidden");  
} else {  
     //We should never hit this point, but as a last resort, we should notify the user if we are  
     //looking for something that doesn't exist.  
     alert("Sorry, that information doesn't exist for this listing!");  
}  
//Set the hash to the div name plus a space.  This prevents us from jumping to the hash point  
//(since that anchor technically doesn't exist), but also allows us to use the reference  
//if we are linking to this page.  The space will be removed in init() when we load the page.  
window.location.hash = divNameToShow[0]+ ' ';  
//No need to return false.    
}

In our onload script, you have to remove the space and use the hash string to set the current tab.  My solution:

function init() {  
  
     var links = document.getElements("li.widget_tab");

    for(var i=0;i<links.length;i++) {  
         links[i].onclick = getClickSource;  
     }  
    var divs = document.getElements("div.widget_display").addClass("hidden");  
  
    divs[0].removeClass("hidden");  
     var divTabHeadings = document.getElements("div.widget_display h2").addClass("hidden");  
    //If there is a hashed location set already, let's jump to it.    
    if(window.location.hash){  
         hash=window.location.hash.replace(" ", "");  //Take out the space we added  
         getTabAndShow(hash);  
    }  
}

I'm not sure how well this script is going to work across the browser spectrum, but I have confirmed that it does work in Firefox 3.5+, IE7, and IE8.  Chrome is apparently smart enough to remove our space and jump to the ID.  We could make it something like a period to overcome this, but I'd rather have a jumpy browser than illegal characters in my URL.