Show or hide div based on URL link
So I would like to show or hide div content based on URL link or page name. You can use this method to show/hide banners, navigation/menu, footer, header or whatever you want.
I would like to hide DIV with ID=divfooter when you hit page named "PageName.html".
NOTE: It doesn't have to be HTML page! Could be .htm, .php, .aspx etc. It look for the word 'PageName' anywhere in URL not for the actual HTML page. So link: 'http://www.yourwebsite.com/index.php?pagename/function=?welcome' would work as well since there is 'pagename' in it.
So first...you add this script to the <head> section of your page.
<script type = "text/javascript">
function showDiv() {
var url = window.location.href;
if (/(PageName)/i.test(url)) {
document.getElementById("divfooter").style.display="none";
}
else {
document.getElementById("divfooter").style.display="block";
}
}
</script>
Second...you add onload function to the <body> tag
<body onload = "showDiv()" >
DONE! Now every time you visit PageName.html your divfooter DIV will be hidden.
And here is how your HTML code should look like...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type = "text/javascript">
function showDiv() {
var url = window.location.href;
if (/(PageName)/i.test(url)) {
document.getElementById("divfooter").style.display="none";
}
else {
document.getElementById("divfooter").style.display="block";
}
}
</script>
</head>
<body onload = "showDiv()" >
<div id="divfooter">
Any content here...
</div>
</body>
</html>