Forum Moderators: open

Message Too Old, No Replies

Toggle Script

Div Toggle JavaScript

         

daltilio

7:42 pm on Mar 16, 2005 (gmt 0)



Can anyone help me out here. See my code below. I am trying to create a tree like menu using div and a javascript toggle script. Every time I click on the link, I get 'Object Required.' I am sure I just overlooked something, but I am pulling my hairs out tryuing to figure out what.
Thanks.
Brian


<html>
<head>
<STYLE TYPE="text/css">
A.leftnav {font-family:"verdana, arial, sans-serif"; font-size:"11px"; color:"#000000"; text-decoration:"none"; font-weight:"normal";}
A.leftheadnav:visited {font-family:"verdana, arial, sans-serif"; font-size:"13px"; color:"#fefefe"; text-decoration:"none";font-weight:"bold";}
A.leftheadnav:active {font-family:"verdana, arial, sans-serif"; font-size:"13px"; color:"#fefefe"; text-decoration:"none";font-weight:"bold";}
A.leftheadnav:hover {font-family:"verdana, arial, sans-serif"; font-size:"13px"; text-decoration:"none"; color:"#FCCE55"; font-weight:"bold";}
A.leftheadnav {font-family:"verdana, arial, sans-serif"; font-size:"13px"; color:"#fefefe"; text-decoration:"none";font-weight:"Bold";}
A.leftnav:visited {font-family:"verdana, arial, sans-serif"; font-size:"11px"; color:"#000000"; text-decoration:"none";font-weight:"normal";}
A.leftnav:active {font-family:"verdana, arial, sans-serif"; font-size:"11px"; color:"#000000"; text-decoration:"none";font-weight:"normal";}
A.leftnav:hover {font-family:"verdana, arial, sans-serif"; font-size:"11px"; text-decoration:underline; color:"#000000"; font-weight:"normal";}
</STYLE>
</head>
<body LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">
<script language="JavaScript" type="text/javascript">
function toggleDiv(e, link) {
var imageTitle;
var div = document.getElementById(e);
var linkDiv = document.getElementById(link);
var display = div.style.display;
if (display == "none") {
div.style.display = "block";
imageTitle = "minus.jpg";
}
else if (display == "block") {
div.style.display = "none";
imageTitle = "plus.jpg";
}
if(linkDiv!= null) {
linkDiv.innerHTML = "<a href=\"\" onClick=\"toggleDiv('" + e + "','" + link + "'); return false;\"><img src=\"../../graphics/"+ imageTitle +"\" width=\"8\" height=\"8\" border=\"0\"></a>";
}
}
</script>
<TABLE BGCOLOR=#FFFFFF BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=100%>
<TR>
<TD BGCOLOR="#FFFFFF" VALIGN="TOP">
<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD bgcolor="#000000" ></TD>
<TD>
<TABLE width=200 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD height=1 bgcolor="#000000" ><img src="../graphics/space.gif" width=1 height=1 alt=""></td> <!-- Top Black Line of Side Bar -->
</tr>
</TABLE>
<TABLE width=200 BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<td bgcolor="#336699" width=12><div id="1"><a href="javascript:void()" onClick="toggleDiv('group1','1', ''); return true;"><img src="../../graphics/plus.jpg" alt="" width="9" height="9" border="0"></a></div></td>
<td bgcolor="#336699">&nbsp;<a href="javascript:void()" onClick="toggleDiv('group1','1', ''); return true;" class="leftheadnav">Group 1</a></td>
</tr>
</Table>
<div id="1" style="display: none;">
<Table width=200 BGCOLOR="#CAD8E6" BORDER=0 CELLPADDING=0 CELLSPACING=0>
<TR>
<TD colspan=2 height=1 bgcolor="#000000" ><img src="../graphics/space.gif" width=1 height=1 alt=""></td>
</tr>
<TR>
<TD>&nbsp;</TD>
<TD>
<A href='choose.asp?action=thumbs&sg_id=1&g_id=1' class="leftnav">
Sub 1<Br></A>
<span class="NavTextDate">&nbsp;&nbsp;7/17/2004 - 7/17/2004<BR></SPAN>
<img src="../graphics/line_blu.gif" width=194 vspace=2 height=1 alt=""><br>
<A href='choose.asp?action=thumbs&sg_id=3&g_id=1' class="leftnav">
Sub 2<Br></A>
<span class="NavTextDate">&nbsp;&nbsp;7/18/2004 - 7/18/2004<BR></SPAN>
<img src="../graphics/line_blu.gif" width=194 vspace=2 height=1 alt=""><br>
<A href='choose.asp?action=thumbs&sg_id=2&g_id=1' class="leftnav">
Sub 3<Br></A>
<span class="NavTextDate">&nbsp;&nbsp;7/18/2004 - 7/18/2004<BR></SPAN>
<img src="../graphics/line_blu.gif" width=194 vspace=2 height=1 alt=""><br>
<a href='choose.asp?action=video&g_id=1' class="leftnav">
Video 1</A>
</TD>
</TR>
</TABLE>
</div>
</TD>
<TD bgcolor="#000000" ></TD>
</TR>
<TR>
<TD colspan=3 height=1 bgcolor="#000000" ><img src="../graphics/space.gif" width=1 height=1 alt=""></td> <!-- Bottom Black Line of Side Bar -->
</tr>
</TABLE>
</TD>
<TD width=4 rowspan=2><img src="../graphics/space.gif" width=4 height=1 alt=""></td> <!-- Space between Side Bar and Main Layout Area -->
</TR>
</TABLE>
</body>
</html>

Bernard Marx

9:05 pm on Mar 16, 2005 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Marx's Debugging Tips #12:

Amend toggleDiv as follows..

function toggleDiv(e, link)
{
var imageTitle;
[blue]alert(e)[/blue]
var div = document.getElementById(e);
[blue]alert(div)[/blue]

The script can't find an element with id = 'group1'
(and neither can I).