CODEWITHSUNDEEP
jqueryhtml
nickdoesdesign
nickdoesdesign

Reputation: 129

ID in URL not hiding other divs

so Im building a script where it will hide divs based upon which ID is in the url. This is what I have so far:

<script>
$(function(){ 
if (document.location.href.indexOf('#aberdeen') > 0) 
$("#centralia, #chewelah, #everett, #harbour-pointe").hide();

if (document.location.href.indexOf('#centralia') > 0) 
$("#aberdeen, #chewelah, #everett, #harbour-pointe").hide();

if (document.location.href.indexOf('#chewelah') > 0) 
$("#aberdeen, #centralia, #everett, #harbour-pointe").hide();

if (document.location.href.indexOf('#everett') > 0) 
$("#aberdeen, #chewelah, #centralia, #harbour-pointe").hide();

if (document.location.href.indexOf('#harbour-pointe') > 0) 
$("#aberdeen, #chewelah, #everett, #centralia").hide();

if (document.location.href.indexOf('#') < 0)
    $(".directory").show();
});
</script>

However it is still showing all of them even with an id appended in the URL. Any ideas?

Upvotes: 1

Views: 115

Answers (4)

mynameiscoffey
mynameiscoffey

Reputation: 15982

As an alternative to Javascript solutions given above, you can do this in CSS (modern browsers only):

If you give all your divs for example a hashdisplay class, you can have the following styles:

.hashdisplay { display: none; }
.hashdisplay:target { display: block; }

http://jsfiddle.net/9qCYU/

WARNING!! Only works in browsers that support the :target pseudo-class!

http://reference.sitepoint.com/css/pseudoclass-target

Upvotes: 0

Ram
Ram

Reputation: 144689

try this, you can add a class to the items and use document.location.hash:

$(function(){ 
   var id = document.location.hash;
   $('.all').not(id).hide() // hide them expect the element that has an id of hash
});

Upvotes: 2

gen_Eric
gen_Eric

Reputation: 227270

That's called a "hash", not an "ID". It's located in document.location.hash, not document.location.href.

if (document.location.hash === '#aberdeen') {
    $("#centralia, #chewelah, #everett, #harbour-pointe").hide();
}

Upvotes: 7

Jordizle
Jordizle

Reputation: 252

Try :

if (document.location.hash.indexOf('#aberdeen') != -1) {
    $("#centralia, #chewelah, #everett, #harbour-pointe").hide();
}

Upvotes: 0

Related Questions