[FallFromINFINITY]

A simple hide on click code.

function dispHandle(obj) {
if (obj.style.display == 'none') {
obj.style.display = '';
} else {
obj.style.display = 'none';
} }

<p id="hide">Hello</p>
<a onclick="dispHandle(hide)">Hide/show text</a>

Here's what I need help with. This code only works if the object you want to control has an ID attribute. I need it to work for something that only has a CLASS attribute. The main reason is that I need a button to control a dozen different parts, simultaneously. Finding the file for each one of the parts and editing the code to add a ID attribute would take a lot of time, and would be very easy to miss several of the objects. There are over 43 files that would need this done to it. But they all already have the same CLASS attribute, so it would be easier to modify this one instance of code that it would be to modify 40+.

[MMJ]

In the older version's of browsers you can't get elements by class.

Your best bet would be to loop through all p elements, check their class to find the one that needs to be hidden, then set a variable to that element.

Then in the function look for that variable and toggle its visibility.

[FallFromINFINITY]

Originally Posted by MMJ

In the older version's of browsers you can't get elements by class.

Your best bet would be to loop through all p elements, check their class to find the one that needs to be hidden, then set a variable to that element.

Then in the function look for that variable and toggle its visibility.

Here's the problem: The webpages are in php, and the elements are part of/are dozens of separate files. The elements have different tags, ranging from div to table to and several others. The page has several variables, and loads different parts of itself, causing different elements to added to the page. I am looking for a way to select all of the elements, when the only thing that is similar is the class. It needs to be done in a way that does not reload the page, and can be undone, without reloading the page.

[MMJ]

Either loop through all the elements looking for that class or do something like this:

http://www.quirksmode.org/blog/archi...mentsbycl.html

i.e. use document.getElementsByClassName when the browser supports it and when it doesn't use a custom function.

[FallFromINFINITY]

How would integrate that into the code that I already have? I'm newer to javascript, so I'm not entirely sure exactly how to run this.

If it helps, the class of the elements is "border" and the hide/show script is to be run on a button click. Really, all I need is: when the button is clicked, to change the visibility from "visible" to "none" and back when it's clicked again.

[MMJ]

basic code:

<a href="#" onclick="toggleEl();">Toggle</a>

function toggle(){
	var i;
	i = i ? 0 : 1;
	document.getElementsByClassName('border')[0].visibility = i ? "none" : "visible";
}

[FallFromINFINITY]

perfect. The site is down at the moment. So I'll get back to you if it works or not as soon as it's online again.