Using javascript to hide and show text

master maste

master maste

New Member
Reaction score
32
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

enouwee

Non ex transverso sed deorsum
Reaction score
240
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

AceHart

Your Friendly Neighborhood Admin
Reaction score
1,495
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... :p
 
enouwee

enouwee

Non ex transverso sed deorsum
Reaction score
240
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.
Click to expand...
...and that's exactly what the code does: whenever you click on the "about" link, it hides the other one. :D


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

master maste

New Member
Reaction score
32
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 :eek:

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

enouwee

Non ex transverso sed deorsum
Reaction score
240
master maste said:
Any ideas?
Click to expand...

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

EDIT: Just in case you're wondering what that code snippet does:
  1. insert the code into the <head> of your page
  2. customize the ids array to fit your needs
  3. add the following attribute to your <body> tag: onload="load()"
  4. add to to your links: onclick="toggle_visibility(xyz) where xyz is one of 'info', 'contact', ...
 
master maste

master maste

New Member
Reaction score
32
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. :)
 
You must log in or register to reply here.
General chit-chat
Help Users
  • No one is chatting at the moment.
  • Ghan Ghan:
    Howdy
  • Ghan Ghan:
    Still lurking
     +3
  • The Helper The Helper:
    I am great and it is fantastic to see you my friend!
     +1
  • The Helper The Helper:
    Here is a great appetizer recipe Texas style! https://www.thehelper.net/threads/recipe-chicken-stuffed-poblano-peppers.194086/
  • The Helper The Helper:
    If you are new to the site please check out the Recipe and Food Forum https://www.thehelper.net/forums/recipes-and-food.220/
  • Monovertex Monovertex:
    How come you're so into recipes lately? Never saw this much interest in this topic in the old days of TH.net
  • Monovertex Monovertex:
    Hmm, how do I change my signature?
  • tom_mai78101 tom_mai78101:
    Signatures can be edit in your account profile. As for the old stuffs, I'm thinking it's because Blizzard is now under Microsoft, and because of Microsoft Xbox going the way it is, it's dreadful.
  • The Helper The Helper:
    I am not big on the recipes I am just promoting them - I use the site as a practice place promoting stuff
     +2
  • Monovertex Monovertex:
    @tom_mai78101 I must be blind. If I go on my profile I don't see any area to edit the signature; If I go to account details (settings) I don't see any signature area either.
  • The Helper The Helper:
    You can get there if you click the bell icon (alerts) and choose preferences from the bottom, signature will be in the menu on the left there https://www.thehelper.net/account/preferences
  • The Helper The Helper:
    I think I need to split the Sci/Tech news forum into 2 one for Science and one for Tech but I am hating all the moving of posts I would have to do
  • The Helper The Helper:
    New dessert for Summer - https://www.thehelper.net/threads/recipe-lemon-blueberry-layer-cheesecake.194113/
  • The Helper The Helper:
    What is up Old Mountain Shadow?
  • The Helper The Helper:
    Happy Thursday!
     +1
  • Varine Varine:
    Crazy how much 3d printing has come in the last few years. Sad that it's not as easily modifiable though
  • Varine Varine:
    I bought an Ender 3 during the pandemic and tinkered with it all the time. Just bought a Sovol, not as easy. I'm trying to make it use a different nozzle because I have a fuck ton of Volcanos, and they use what is basically a modified volcano that is just a smidge longer, and almost every part on this thing needs to be redone to make it work
  • Varine Varine:
    Luckily I have a 3d printer for that, I guess. But it's ridiculous. The regular volcanos are 21mm, these Sovol versions are about 23.5mm
  • Varine Varine:
    So, 2.5mm longer. But the thing that measures the bed is about 1.5mm above the nozzle, so if I swap it with a volcano then I'm 1mm behind it. So cool, new bracket to swap that, but THEN the fan shroud to direct air at the part is ALSO going to be .5mm to low, and so I need to redo that, but by doing that it is a little bit off where it should be blowing and it's throwing it at the heating block instead of the part, and fuck man
  • Varine Varine:
    I didn't realize they designed this entire thing to NOT be modded. I would have just got a fucking Bambu if I knew that, the whole point was I could fuck with this. And no one else makes shit for Sovol so I have to go through them, and they have... interesting pricing models. So I have a new extruder altogether that I'm taking apart and going to just design a whole new one to use my nozzles. Dumb design.
  • Varine Varine:
    Can't just buy a new heatblock, you need to get a whole hotend - so block, heater cartridge, thermistor, heatbreak, and nozzle. And they put this fucking paste in there so I can't take the thermistor or cartridge out with any ease, that's 30 dollars. Or you can get the whole extrudor with the direct driver AND that heatblock for like 50, but you still can't get any of it to come apart
  • Varine Varine:
    Partsbuilt has individual parts I found but they're expensive. I think I can get bits swapped around and make this work with generic shit though
  • Ghan Ghan:
    Heard Houston got hit pretty bad by storms last night. Hope all is well with TH.
  • The Helper The Helper:
    Power back on finally - all is good here no damage
     +2
  • V-SNES V-SNES:
    Happy Friday!
     +1

      The Helper Discord

      Staff online

      Members online

      Online now:
      355 (members: 8, guests: 347)

      Share this page

      Affiliates

      Hive Workshop NUON Dome World Editor Tutorials

      Network Sponsors

      Apex Steel Pipe - Buys and sells Steel Pipe.
      Top