Forum Moderators: open

Message Too Old, No Replies

Collapsing Text Javascript Problem with XHTML

         

mcmrob

4:27 pm on May 30, 2005 (gmt 0)

10+ Year Member



Hi,

Please have a look at the following Javascript:

function AlterDiv(strDivID, strAction) {
if (strAction == "hide") {
eval("document.all.detal"+strDivID+".style.display='none'");
eval("document.all.label"+strDivID+".style.display='block'");
}
if (strAction == "show") {
eval("document.all.label"+strDivID+".style.display='none'");
eval("document.all.detal"+strDivID+".style.display='block'");
}
}

This, together with the following HTML, should work like this: When the user clicks on the first link (which links to "javascript:AlterDiv(1,'show')") the script should make everything within the "label1" div disappear (display: none) and replace that with all content within the "detal1" div (of which the style tag will change to "display: block").

The HTML:

<div class="section" id="label1" style="display: block;"><a href="javascript:AlterDiv(1,'show');">Collapse Title</a><br />&nbsp;</div>

<div class="section" id="detal1" style="display: none;"><a href="javascript:AlterDiv(1,'hide');">Collapse Title</a><br />
Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla.
</div>

Now, this works just fine. The problem is that when I add the following code to the page, it stops working.

<!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">

Obviously something is wrong with the code, or this sort of thing is just not supported by XHTML.

In case my description is unclear, here's the script live:

<Sorry, no personal URLs.
See Terms of Service [webmasterworld.com]>

Does anyone have a clue?

[edited by: tedster at 10:42 pm (utc) on May 30, 2005]

encyclo

4:51 pm on May 30, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The difference is between quirks (without the XHTML doctype) and standards-compliance (with the doctype) rendering modes for the browser. You are using
document.all
when you should really be using the standardized
document.getElementById
instead. One good tip: if you're using Firefox (or Mozilla), open up the Javascript console and the errors are detailed.

mcmrob

5:06 pm on May 30, 2005 (gmt 0)

10+ Year Member



I see. Thanks for that.

Could you perhaps give me a hand with the script? I've tried several variations using the document.getElementById() but they don't seem to be working. I'm not that good at Javascript so I probably placed it wrong or something.

mcmrob

9:46 pm on May 30, 2005 (gmt 0)

10+ Year Member



Got it! I always tell others to search for the answer before asking the question, and now I asked first :P

Thanks again.