Jump to content

Toggle Divs - Extra


jaymc

Recommended Posts

I basically want to have 4 links on my page. Each link, when clicked, will make a DIV visible

So in essance I will have 4 hidden divs which will appear when the relivent link is clicked

Ok great, nice and easy!

However, Onclicking a link, I want it to make all of the other 3 divs hidden..

So basically, at any one time only one div will be visible

I have this script but it doesnt hide the rest when one is clicked, they just over lap.

Perhaps someone could ammend this script for me, Im quite lost

[code]<script type="text/javascript">
<!--
function resettoggle() {
var e = document.getElementById('foo1');
var f = document.getElementById('foo2');
var g = document.getElementById('foo3');


e.style.display = 'none';
f.style.display = 'none';
g.style.display = 'none';

}

function toggle_visibility(id) {
var e = document.getElementById(id);
var f = document.getElementById(id);
var g = document.getElementById(id);


if(e.style.display == 'none')
e.style.display = 'block';
f.style.display = 'none';
g.style.display = 'none';

else
e.style.display = 'none';


}
//-->
</script>

<body onLoad="resettoggle()">

<a href="#" onclick="toggle_visibility('foo1');">Click here to toggle visibility of element #foo1</a>
<a href="#" onclick="toggle_visibility('foo2');">Click here to toggle visibility of element #foo2</a>
<a href="#" onclick="toggle_visibility('foo3');">Click here to toggle visibility of element #foo3</a>
<div id="foo1">This is foo1</div>
<div id="foo2">This is foo2</div>
<div id="foo3">This is foo3</div>


</body>[/code]
Link to comment
Share on other sites

Amended to...

[code]

if(e.style.display == 'none'){
e.style.display = 'block';
f.style.display = 'none';
g.style.display = 'none';
}

else{
e.style.display = 'none';
f.style.display = 'block';
g.style.display = 'block';
}
[/code]

Stil doesnt work?
Link to comment
Share on other sites

[code]function ExpandCollapse(e) {
var dd = document.getElementById( e );
if (dd.style.display == "")
dd.style.display = "none";
else
dd.style.display = "";
}[/code]
try that, it works great for me, I forgot where I got it tho
Link to comment
Share on other sites

u just have to use a link
like

or anything like

[code]<input type="button" onClick="ExpandCollapse('divid1')" value="Hide/Disable Div">
<div id="divid1">Hi Div 1</div>


<input type="button" onClick="ExpandCollapse('divid2')" value="Hide/Disable Div">
<div id="divid2">Hi Div 2</div>


<input type="button" onClick="ExpandCollapse('divid3')" value="Hide/Disable Div">
<div id="divid3">Hi Div 3</div>[/code]
Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.