[spikeon]

I am attempting to have a link hide and unhide a div

It works in Chrome and Firefox, but not in IE

The only thing that does not work is when i click it, it dosen't unhide or change the title, so basically, function unHide is not running, although there are no errors thrown.


I have this in the top of the page

document.getElementsByClassName = function(className){
		var hasClassName = new RegExp("(?:^|\\s)" + className + "(?:$|\\s)");
		var allElements = document.getElementsByTagName("*");
		var results = []; 
		var element;
		for (var i = 0; (element = allElements[i]) != null; i++) { 
			var elementClass = element.className;
			if (elementClass && elementClass.indexOf(className) != -1 && hasClassName.test(elementClass))
				results.push(element);
		}

		return results;
}

function hider(){
	var eles = document.getElementsByClassName('hider');
	for(var i = 0; i < eles.length; i++){
		var theid = eles[i].id;
		eles[i].innerHTML = "<div style='display:block; text-decoration:none; color: black; clear:both; text-align:right; float:right; margin-top:-40px; margin-right:3px;' class='open'><a href='#' onclick=\"unHide('" + theid + "'); return false\" > Click To Open </a></div><div class='hides'> " + eles[i].innerHTML + "</div>";
	}
}

function unHide(a){
	var eles =  document.getElementById(a);
			str = eles.innerHTML;
			
			if(str.search("> Click To Open <") == -1){
				str = str.replace("> Click To Close <", "> Click To Open <");
				str = str.replace("class=\"nothides\"", "class=\"hides\"");
			}
			else{ 
				str = str.replace("> Click To Open <", "> Click To Close <");
				str = str.replace("class=\"hides\"", "class=\"nothides\"");
			}
			
			
			eles.innerHTML = str;
}

and i have this where i want it to display and hide the section

<h4 onclick="unHide('editB')">Edit This Property</h4>
<div id='editB' class='hider'>
...
</div>

The way it works is that it reads the page for all objects with the class name "hider"

then it inserts two divs into "hider", one of them is a title that says: "click to open" and the other div has a class of "hides" that is set to display:none

Once "click to open" is clicked, it uses .replace to find "click to open" and class=hide and change them to "Click to Close" and class=nothides
if it is clicked again, it does the opposite.

i just need to know why it isn't working in IE.
Thanks in advance

[level1]

IE can't handle onclick events on an h4 (I'm guessing newer versions of IE can). You'll need to wrap it in an anchor tag and place the onclick event there. Like so:

<h4><a href="#"  onclick="unHide('editB')">Edit This Property</a></h4>

I prefer to do this instead (so the user isn't jumped to top of page) :

<h4><a href="javascript:unHide('editB')">Edit This Property</a></h4>

[spikeon]

This did not work, i implemented it and it STILL does nothing.
perhaps the error resides in the unHide function?

[Atli]

Try removing the < and > from the search and replace calls in your unHide function, and just search for the text itself. E.g. str.search("Click To Open")

Even though you add them as <a...> Click To Open </a>, IE is likely to remove the space leading the text. It converts the HTML you add to the innerHTML into a more "suitable" format. Just print the innerHTML you are searching. Even though you add the elements using lower case tag names, IE returns them as upper case. You can't count on IE to give you back the exact source you originally gave it.

On a different note, you would probably be better of giving these elements IDs and changing them via the DOM, rather than retrieve the source and using string manipulation. For one thing, it would prevent problems such as these, and for another it is probably more efficient. (String manipulation is resource-intensive.)

level1, on 04 August 2010 - 11:02 PM, said:

IE can't handle onclick events on an h4 (I'm guessing newer versions of IE can). You'll need to wrap it in an anchor tag and place the onclick event there.

Not true. All versions since IE4 can handle onclick events on these elements. (I just tested it to be sure.)

[spikeon]

FIXED!!!

thanks

[CTphpnwb]

Atli, on 04 August 2010 - 08:20 PM, said:

level1, on 04 August 2010 - 11:02 PM, said:

IE can't handle onclick events on an h4 (I'm guessing newer versions of IE can). You'll need to wrap it in an anchor tag and place the onclick event there.

Not true. All versions since IE4 can handle onclick events on these elements. (I just tested it to be sure.)

FYI, and possibly relevant to the OP's original problem:
While IE can handle onclick events, there are a number of instances where it handles them poorly. Also, the next step, an innerhtml update fails on things like tables or divs with overflow set to auto.
http://www.ericvasil...code-karma.html
http://webbugtrack.b...-on-tables.html