...

View Full Version : Show/Hide Div



FrankieB
11-03-2006, 04:20 PM
Hey guys,

I've been looking for an unobtrusive way, to have 3 links, and 3 divs. The first div will show, and when clicking the other two links, the 1st div gets replaced with either the 2nd or 3rd div depending on which link you click. the first div reappears after the first link is clicked.

now i've found a way to do this, grant it it works just ok, but, my particular page has 5 sets of what i want above.

is there an easy way to do this? or am i going to end up having like, 5 different array's and a bunch of different functions?

Need help very much!

thanks

frankie

A1ien51
11-03-2006, 04:25 PM
If you give your div ids such as div0, div1, div2... You could do something like this



function ShowHideDiv(idNum){
for(var i=0;i<5;i++){
document.getElementById("div" + i).style.display = "none";
}
document.getElementById("div" + idNum).style.display = "block";
}


Where you pass in the div you want to show eg ShowHideDiv(3);

Eric

FrankieB
11-03-2006, 04:42 PM
I'm not sure if I made any sense with my first post. Either I made no sense or I am retarded and do not understand what you wrote, Eric.

Here's an example.


Link #1 - Link #2 - Link #3
-------------------------
<div>Here is some content! Here is some content! Here is some content!</div>

Link #1 - Link #2 - Link #3
-------------------------
<div>Here is some content! Here is some content! Here is some content!</div>

Link #1 - Link #2 - Link #3
-------------------------
<div>Here is some content! Here is some content! Here is some content!</div>

Link #1 - Link #2 - Link #3
-------------------------
<div>Here is some content! Here is some content! Here is some content!</div>

Link #1 - Link #2 - Link #3
-------------------------
<div>Here is some content! Here is some content! Here is some content!</div>

Now I need each of those links, to change out the div underneath its section. The code I was using before, hides the other div's when you click one link, except in my case it was hiding ALL of the div's on the page....

:(

brandonH
11-03-2006, 05:39 PM
i think this is what you are looking for:



<html>
<head></head>
<body>

<div>
<!--put your links here-->
<a href=#stayhere id=a1 onclick="showhide(this.id);">first link</a>
<a href=#stayhere id=a2 onclick="showhide(this.id);">second link</a>
<a href=#stayhere id=a3 onclick="showhide(this.id);">third link</a>
<!--end where you put your links-->
<div>
<!--put all your divs here-->
<div id=a1div style="display:none;background-color:red;width=100px;height=100px;">first div</div>
<div id=a2div style="display:none;background-color:blue;width=100px;height=100px;">second div</div>
<div id=a3div style="display:none;background-color:green;width=100px;height=100px;">third div</div>
<!--end where you put your divs-->
</div>
</div>


<div>
<!--put your links here-->
<a href=#stayhere id=a4 onclick="showhide(this.id);">first link</a>
<a href=#stayhere id=a5 onclick="showhide(this.id);">second link</a>
<a href=#stayhere id=a6 onclick="showhide(this.id);">third link</a>
<div>
<!--put all your divs here-->
<div id=a4div style="display:none;background-color:red;width=100px;height=100px;">first div</div>
<div id=a5div style="display:none;background-color:blue;width=100px;height=100px;">second div</div>
<div id=a6div style="display:none;background-color:green;width=100px;height=100px;">third div</div>
<!--end where you put your divs-->
</div>
</div>

<script type=text/javascript>
function showhide(Id){
var Par=document.getElementById(Id).parentNode;
var count='3'
i='0';
while(i<=count){
var childlngth=Par.childNodes.length-1;
Par.childNodes[childlngth].childNodes[i].style.display="none";
i++;
}
document.getElementById(Id+"div").style.display="block";
}

</script>

</body>
</html>



just be sure that every link has its own unique id and that what ever div you want to show when clicked on that link has that value and div in its id.

i.e.:<a href=#stayhere id=a1>first</a>
<div id=a1div></div>

do not give any two elements the same id value.

FrankieB
11-03-2006, 05:54 PM
After adding quotes and fixing html errors I keep getting this



Par.childNodes[childlngth].childNodes[i] has no properties


in my Javascript console (firefox).

brandonH
11-03-2006, 06:46 PM
please post the whole source code for me please. maybe one of your corrections causes the script to not find the childNode. I would like to inspect the source to see if this is the case.

FrankieB
11-03-2006, 06:51 PM
<!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=iso-8859-1" />
<script type="text/javascript">
function showhide(Id) {
var Par=document.getElementById(Id).parentNode;
var count = "3";
i = "0";
while( i < count ) {
var childlngth = Par.childNodes.length-1;
Par.childNodes[childlngth].childNodes[i].style.display="none";
i++;
}
document.getElementById(Id+"div").style.display="block";
}

</script>
</head>
<body>

<div>
<!--put your links here-->
<a href="#stayhere" id="a1" onclick="showhide(this.id);">first link</a>
<a href="#stayhere" id="a2" onclick="showhide(this.id);">second link</a>
<a href="#stayhere" id="a3" onclick="showhide(this.id);">third link</a>
<!--end where you put your links-->
<div>
<!--put all your divs here-->
<div id="a1div" style="display:none;">first div</div>
<div id="a2div" style="display:none;">second div</div>
<div id="a3div" style="display:none;">third div</div>
<!--end where you put your divs-->
</div>
</div>


<div>
<!--put your links here-->
<a href="#stayhere" id="a4" onclick="showhide(this.id);">first link</a>
<a href="#stayhere" id="a5" onclick="showhide(this.id);">second link</a>
<a href="#stayhere" id="a6" onclick="showhide(this.id);">third link</a>
<div>
<!--put all your divs here-->
<div id="a4div" style="display:none;">first div</div>
<div id="a5div" style="display:none;">second div</div>
<div id="a6div" style="display:none;">third div</div>
<!--end where you put your divs-->
</div>
</div>



</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum