Forum Moderators: open
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 /> </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]
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.