[jQuery] showing / hiding divs based on location hash, proposed solution
i previously asked about a way to hide and show divs based on the
location hash value. so if the url is domain.com/page.php#contact then
all divs but the contact div should be hidden when coming from an
external page.
Jorn pointed me to some existing plugins but they went a bit over my
head, so I came up with my own solution, below.
first i hide all divs inside my div#aboutContent by default. then i
extract the location hash value. next i loop through all divs inside
div#aboutContent as many times as there are nbrs of divs and if the
div id matches the value in the location hash, i make it visible.
i can link from an external page to my domain.com/page.php#contact and
the relevant div will be shown. i realise this is quite simple ... but
its good enough for me.
feedback?
sample html:
<div id="aboutContent">
<div id="contact">contact info here</div>
<div id="investors">investor info here</div>
<div id="freebeer">how to get free beer</div>
</div>
JS:
$(document).ready(function()
{
$("#aboutContent > div").addClass('hide');
/* location hash: */
var locationHash = window.location.hash;
/* location minus the hash symbol (will extract to 20 chars after
the # */
var location = locationHash.substring(1,20);
/* number of child divs of #aboutContent */
var divNbrs = $("div#aboutContent > div").length;
for (count = 0; count < divNbrs; count+=1)
{
var theDiv = $("div#aboutContent > div:eq("+count+")");
var divsId = $("div#aboutContent > div:eq("+count+")").attr('id');
if(divsId == location){
theDiv.addClass('show');
}
}
});