Using javascript to hide and show text

master maste · Dec 19, 2008

I am trying to hide and show text when you click on a link... e.g. when you click on the "contact" link it shows the contact div.

My problem is that when I click on the "contact" link and then click on the "about" link it puts them on top of each other, but I want it to hide the contact div when I click on the "about" link. and vice versa so that only one lot of information is being showed at any one time. (but at the start only links are shown, thats why #about and #contact have display set to none)

html:

Code:

<!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" />
<link rel="icon" type="image/ico" href="images/favicon.ico" />
<link href="css.css" rel="stylesheet" type="text/css"/>

<title>Default</title>
</head>

<body>

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

<div id="image"></div>

<div id="main">
<a href="#" onclick="toggle_visibility('about');">About</a>
<a href="#" onclick="toggle_visibility('contact');">Contact</a>
</div>

<div id="about">
<p>About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About About rawr</p></div>

<div id="contact">
<p>Contact Contact Contact Contact Contact Contact Contact Contact  Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact Contact rawr</p></div>

</body>
</html>

CSS:

Code:

@charset "utf-8";
/* CSS Document */

#image {
	float: left;
	height: 400px;
	width: 250px;
	margin: 10% 0 0 0;
	background: #999999;
}

#main {
	position: absolute;
	width: 500px;
	margin: 10% 0 0 40%;
	background: #0099FF;
}

#about, #contact {
	position: absolute;
	width: 500px;
	margin: 15% 0 0 40%;
	background: #0099FF;
}

/*-----Text-----*/

h1, h2, p, ul, a:link, a:visited {
	font-family: Arial, Helvetica, sans-serif;
}

/*-----Display-----*/

#about, #contact {
	display: none;
}

enouwee · Dec 19, 2008

Code:

function toggle_visibility(show, hide)
{
  var e = document.getElementById(show);
  if(e.style.display == 'block')
  {
    e.style.display = 'none';
  }
  else
  {
    e.style.display = 'block';
  }

  e = document.getElementById(hide);
  e.style.display = 'none';
}

Code:

<div id="main">
<a href="#" onclick="toggle_visibility('about', 'contact');">About</a>
<a href="#" onclick="toggle_visibility('contact', 'about');">Contact</a>
</div>

AceHart · Dec 19, 2008

Hm... and, if both are open, they will both close. And the other way around.
(Unless some care is taken of course)
But, for some reason, I expect that to be the followup post...

enouwee · Dec 19, 2008

You obviously didn't read the requirements...

master maste said:
I want it to hide the contact div when I click on the "about" link.

...and that's exactly what the code does: whenever you click on the "about" link, it hides the other one.

If it were my code, I'd use something slightly different and make sure my <DIV>'s start out in some consistent state. It would be a pain to pass all the different menu entries as arguments to the toggle function.

Code:

var ids = [
  'forum',
  'downloads',
  'contact',
  'about',
];

function load()
{
  var i;
  var node;

  for (i = 0; i < ids.length; i++)
  {
    if (!(node = document.getElementById(ids[i])))
    {
      continue;
    }

    node.style.display = 'none';
  }
}

function toggle_visibility(id)
{
  var i;
  var node;

  if (!(node = document.getElementById(id)))
  {
    return;
  }

  if(node.style.display == 'block')
  {
    node.style.display = 'none';
    return;
  }

  node.style.display = 'block';

  for (i = 0; i < ids.length; i++)
  {
    if (ids[i] == id || !(node = document.getElementById(ids[i])))
    {
      continue;
    }

    node.style.display = 'none';
  }
}

master maste · Dec 20, 2008

Thanks that works a charm, I spent a good deal of time last night messing around with the original link area code, but my version was more like

Code:

<a href="#" onclick="toggle_visibility('about');" onclick="toggle_visibility('contact');">About</a>

and that didn't seem to work at all

I was wondering how I would go about making it work for more than two div's.

say 'about', 'contact', 'info' ...
I tried to change the link area, but that didn't work.

Code:

<div id="main">
<a href="#" onclick="toggle_visibility('about', 'contact', 'info');">About</a>
<a href="#" onclick="toggle_visibility('contact', 'about', 'info');">Contact</a>
<a href="#" onclick="toggle_visibility('info', 'about', 'contact');">Info</a>
</div>

I changed the position of the last one around a bit to make it semi work, but theres still something missing that it needs to separate itself from the 'contact' div.

Any ideas?

enouwee · Dec 20, 2008

master maste said:
Any ideas?

See [POST=928781]#4[/POST], it does exactly that.

EDIT: Just in case you're wondering what that code snippet does:

insert the code into the <head> of your page
customize the ids array to fit your needs
add the following attribute to your <body> tag: onload="load()"
add to to your links: onclick="toggle_visibility(xyz) where xyz is one of 'info', 'contact', ...

master maste · Dec 20, 2008

That works great, I was not quite sure what the code in #4 was about earlier, but now I understand what you were talking about there. Thanks a heap this is very helpful.

Using javascript to hide and show text

master maste

New Member

enouwee

Non ex transverso sed deorsum

AceHart

Your Friendly Neighborhood Admin

enouwee

Non ex transverso sed deorsum

master maste

New Member

enouwee

Non ex transverso sed deorsum

master maste

New Member

Settings Notifications

Options

The Helper Discord

Staff online

Members online

Share this page

Affiliates

Network Sponsors

Using javascript to hide and show text

New Member

Non ex transverso sed deorsum

Your Friendly Neighborhood Admin

Non ex transverso sed deorsum

New Member

Non ex transverso sed deorsum

New Member

Log in

The Helper Discord

Share this page

Affiliates

Network Sponsors