CODEWITHSUNDEEP
javascriptjqueryhtml
Bert B.
Bert B.

Reputation: 579

Using Div Anchor Link to hide/show divs

I have a page with 4 hidden divs. If I want to link to them, I do this for example

<a href="#about" class="nav_text" id="about_link">About</a>

This shows the about div and hides the others due to my Javascript/jQuery that I wrote for it.

However, my problem arises in that the user's address bar reads as /index.php#about_content. If you were to manually type that in, it doesn't show the about_content div because it's hidden. How can I make it show that div if it's manually typed in?

Upvotes: 1

Views: 1218

Answers (2)

Bruno Silva
Bruno Silva

Reputation: 3097

Read the current hash and show it on document ready.

$(document).ready(function() {
    $(window.location.hash).show();
});

Upvotes: 2

LoveAndCoding
LoveAndCoding

Reputation: 7947

You'll want to listen for a hashchange event on the window. Once you do that, load in the element from the hash, and, if it matches, show the proper <div>. You'll also want to check on initial load of the page if there is something in the hash and do the same.

Not that this is IE8+ compatible only, as IE7 and below do not support the hashchange event. If you want to support them, you'll need to use one of the many tricks (or plugins) for it.

PS You can find out what is in the hash using location.hash

Upvotes: 1

Related Questions