Javascript to change display properties of DIVs [Archive]

Click to See Complete Forum and Search --> : Javascript to change display properties of DIVs

{--ads--}

11-18-2003, 04:05 AM

Hi,

I'm currently using the following two functions to show and hide various DIVs.

function ShowDIV(box)
{
box.style.display = "block";
}

function HideDIV(box)
{
box.style.display = "none";
}

Here's some example HTML code for this:

<a href="javascript:;" onClick="ShowDIV(DIV1); return false;">Show</a>
<div id="DIV1" style="display: none;">

Obviously the HideDIV function does the opposite.

Now ideally I'd like these two functions to be merged into one, and to be a toggle. So I can have one link which shows and hides the DIV.

Really I'd also like the link text to change from Show to Hide and vice versa as well.

Not being anywhere near a Javascript guru, I have no idea how to do this. Can anyone help me?

Thanks,

Adam

Pittimann

11-18-2003, 04:15 AM

Hi!

Do something like:

<html>
<head>
<title>Untitled</title>
</head>
<script type="text/javascript">

</script>
<body>
<a href="#" onClick="ShowDIV();">Show</a>
<div id="DIV1" style="display: none;">some content</div
</body>
</html>

Cheers - Pit

fredmv

11-18-2003, 04:15 AM

Welcome to the forums.

Here's something I just put together:<script type="text/javascript">
function toggle(el)
{
myEl = document.getElementById(el);
myEl.style.display = (myEl.style.display == 'block') ? 'none' : 'block';
}
</script><a href="#" onclick="toggle('a');">Show/Hide</a>
<div id="a" style="display: block;">Hello, World</div>I hope that helps you out.

Pittimann

11-18-2003, 04:31 AM

Hi!

I hadn't read your post until the end; so I didn't consider, that you want the link text to toggle as well. Using fredmv's function (which is of course better then mine) you can achieve that like follows:

<html>
<head>
<title>Untitled</title>
<script type="text/javascript">
function toggle(el)
{
myEl = document.getElementById(el);
myEl.style.display = (myEl.style.display == 'none') ? 'block' : 'none';
}
</script>
</head>
<body>
<div id="show" style="display: block;"><a href="#" onclick="toggle('show');toggle('hide');toggle('a');">Show</a></div>
<div id="hide" style="display: none;"><a href="#" onclick="toggle('show');toggle('hide');toggle('a');">Hide</a></div>
<div id="a" style="display: none;">Hello, World</div>
</body>
</html>

Cheers - Pit

{--ads--}

11-18-2003, 05:09 AM

That works perfectly! Thanks very much for both of your replies. Much appreciated.

Adam

{--ads--}

11-18-2003, 12:42 PM

hi....

just as an extra part of this function....how would it be changed to enable to specify a list of DIVs to be toggled in the function call? So instead of doing this:

toggle(div1); toggle(div2); toggle(div3) etc....

I could just do this:

toggle(div1, div2, div3)

is that possible?

Cheers,

Adam

fredmv

11-18-2003, 03:31 PM

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>untitled</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=iso-8859-1" />
<script type="text/javascript">
//<![CDATA[
function toggle()
{
for(i=0; i<arguments.length; i++) document.getElementById(arguments[i]).style.display = (document.getElementById(arguments[i]).style.display == 'block') ? 'none' : 'block';
}
//]]>
</script>
</head>
<body>
<div>
<div id="foo1" style="display: block;">foo</div>
<div id="foo2" style="display: block;">bar</div>
<div id="foo3" style="display: block;">foobar</div>
<a href="#" onclick="toggle('foo1', 'foo2', 'foo3');">Toggle</a>
</div>
</body>
</html>

{--ads--}

11-19-2003, 02:31 AM

thanks for that....works prefectly :-)

Adam