Question

I’ve got a good jQuery show/hide function working; the problem is that if the link is opened by typing the URL directly, it doesn’t degrade well–you can see all of the elements at once.

Is there any way to use the links in the show/hide function, but prevent the links from opening when typed directly into the browser address bar?

Here’s my code:

jQuery

$(document).ready(function() {

    $('#nav li a').first().addClass('blue');

    $('#nav li a').click(function(){

    $('#nav li a').first().removeClass('blue');
    $('#nav li a').removeClass('blue');
    $(this).addClass('blue');

    var toLoad = $(this).attr('href')+'#content';  
    $('#content').hide(0,loadContent);  
    $('#load').remove();  
    $('#wrapper').append('<span id="load">LOADING...</span>');  
    $('#load').fadeIn('normal');  
    //window.location.hash = //$(this).attr('href').substr(0,$(this).attr('href').length-0);  
    function loadContent() {  
        $('#conent').load(toLoad,'',showNewContent())  
    }  
    function showNewContent() {  
        $('#content').show(0,hideLoader());  
    }  
    function hideLoader() {  
        $('#load').fadeOut('normal');  
    }  
    return false;  
    });
});  

HTML

<div id="leftcol">

<div id="menu">
<ul id="nav">
<li><a href="/option1">Option 1</a></li><br />
<li><a href="/option2">Option 2</a></li><br />
<li><a href="/option3">Option 3</a></li><br />
</ul>
</div>
</div>

<div id="content">
<div>

Answer 1

If the link’s href isn’t a URL you should probably use #option1

You could use the hashchange event to call a show/hide function?

$(window).bind('hashchange', function() {
    showHideFunction(window.location.hash);
});

When you click a link the hash will change and the function is called.

If someone types in the address http://domain.com/#option1
Then you can grab the hash like this in your onload function.

var hash = window.location.hash;
if(hash) {
    showHideFunction(hash);
}