Javascript - show/hide text

Factual Questions
1

Warning: I am not a web developer by far, i use Dreamweaver for making pretty simple webpages and only do a few coding changes by hand so i’m not opposed to old school method of coding at all.

Basically i need to create an FAQ page for my company and i don’t want to have a massive wall-of-text when the page loads. So i found samples of code that can make show/hide elements.



<head>
<script language="javascript"> 
function mailnotify() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
function calnotify() {
	var ele = document.getElementById("toggleText");
	var text = document.getElementById("displayText");
	if(ele.style.display == "block") {
    		ele.style.display = "none";
		text.innerHTML = "show";
  	}
	else {
		ele.style.display = "block";
		text.innerHTML = "hide";
	}
} 
</script>
</head>
<body>

<a id="MailNotify" href="javascript:mailnotify();">Mail Notify</a>

<div id="toggleText" style="display: none"> This is an automatic installer that will put the GNotify icon (an envelope) in your System Tray, the icon area next to the time. GNotify only works for new mail items, not calendar reminders.</div>

<br /><br />

<a id="CalNotify" href="javascript:calnotify();">Calendar Notify</a>

<div id="toggleText" style="display: none"> This is an automatic installer that will put the GMinder icon (a miniature calendar) in your System Tray, the icon area next to the time. Gminder only works for calendar event reminders, not new emails.</div>

</body>

There will eventually about 30 answers to the FAQ-style page i am making. So the problem i have run into is that while the first link Mail Notify works fine, the second link Calendar Notify doesn’t show the id=CalNotify text, instead it just shows the same thing for Mail Notify. How bad am i doing? Or, does Dreamweaver actually have this functionality built-in and i just don’t know what Adobe calls it?

2

Your two functions are identical. Change one of the:



	var ele = document.getElementById("toggleText");

to use “toggleText2” and then change one of the IDs:


<div id="toggleText" style="display: none"> This is an automatic installer that will put the GNotify icon (an envelope) in your System Tray, the icon area next to the time. GNotify only works for new mail items, not calendar reminders.</div>

to use “toggleText2” instead of “toggleText.”

BTW, I don’t think you need the displayText bits at all.

3

Why write your own code when Javascript libraries are so much faster and easier to implement. (Disclaimer - Do not use Dreamweaver’s own Spry JS components. Many are finding problems with the latest Tier I browsers.)

With jQuery, look for accordion examples. Or try acomplete tools library with jQuery as the base library.

4

Why bother? They’re almost done.

5

@ mbetter
That works, i guess i just wasn’t able to see the relationship between function and ID in that case.

@ Duckster
I’ve heard of jQuery, just not sure what to do with it, like adding the functionality to IIS or Dreamweaver. From their webpage it seems like a really cool technology, just not sure how fast and easy it would be for me to use.