You're problem is with the way you've built up the tables. I
don't think you
can't have a <div> in the middle of table like that.
This example does work :-
<div id="29" style="display: block"
name="29">
<table>
<tr>
<td width="20%" align="left">
<a onClick="showhide('29');"><img
src="../Images/plus.gif"
border="0" WIDTH="16"
HEIGHT="16"></a>
<a href="admin.asp?id=29">Building
IT</a></td>
<td width="13%"
align="left"><font size="1">
<a href="mailto:MichaelEBEN abc.com"> Michael,
EBEN</a></font></td>
<td width="8%"
align="left"><font
size="1"> (123)438-0050</
a></font></td>
</tr>
</table>
</div>
<script>
function showhide(obj) {
alert(obj)
var el = document.getElementById(obj);
alert(el.style.display);
el.style.display = 'none';
}
</script>
However, you could hide an individual cell :-
<a onClick="showhide('30');">
<td width="13%"
align="left"><font size="1"
id="30">
Rob.
-----Original Message-----
From: 1stJavaScript@yahoogroups.com
[mailto:1stJavaScript@yahoogroups.com] On
Behalf Of austink_2004
Sent: 11 January 2006 20:08
To: 1stJavaScript@yahoogroups.com
Subject: [1stJavaScript] Re: Expand / Collapse div
'block' doesnt work either.
Maybe this may help indicate what I am trying to achieve.
This is the 'view source' output of the web page.
you could copy and paste it into an html editor.
<tr valign="top">
<td valign="top">
<table border="0" width="100%">
<TR>
<div id='29'
style="display:none" name="29">
<td width="20%"
align="left"><a
onClick="showhide('29');"><img
src="../Images/plus.gif"
border="0" WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=29">Building IT</td>
<td width="13%"
align="left"><font
size="1"><a
href="mailto:MichaelEBENabc.com"> Michael,
EBEN</a></font></td>
<td width="8%"
align="left"><font
size="1"> (123)438-0050</
a></font></td>
</div>
</TR>
<TR>
<div id='30'
style="display:none" name="30">
<div id='29'
style="display:none" name="29">
<td
width="20%" align="left"><a
onClick="alert('29');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=30">--------BP -
Solu...</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:MichaelEBENabc.com"> Michael,
EBEN</a></font></td>
<td
width="8%" align="left"><font
size="1"> (123)438-
0050</a></font></td>
</div>
</div>
</TR>
<TR>
<div id='31'
style="display:none" name="31">
<div id='29'
style="display:none" name="29">
<td
width="20%" align="left"><a
onClick="alert('29');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=31">--------BP - Business
Unit Supp...</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:MichaelEBENabc.com"> Michael,
EBEN</a></font></td>
<td
width="8%" align="left"><font
size="1"> (123)438-
0050</a></font></td>
</div>
</div>
</TR>
<TR>
<div id='127'
style="display:none" name="127">
<div id='29'
style="display:none" name="29">
<td
width="20%" align="left"><a
onClick="alert('29');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=127">--------BP - Common
Apps...</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:MichaelEBENabc.com"> Michael,
EBEN</a></font></td>
<td
width="8%" align="left"><font
size="1"> (123)438-
0050</a></font></td>
</div>
</div>
</TR>
<TR>
<div id='32'
style="display:none" name="32">
<div id='29'
style="display:none" name="29">
<td
width="20%" align="left"><a
onClick="alert('29');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=32">--------BP - Common
Planning</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:MichaelEBENabc.com"> Michael,
EBEN</a></font></td>
<td
width="8%" align="left"><font
size="1"> (123)438-
0050</a></font></td>
</div>
</div>
</TR>
<TR>
<div id='155'
style="display:none" name="155">
<td width="20%"
align="left"><a
onClick="showhide('155');"><img
src="../Images/plus.gif"
border="0" WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=155">--------BP_Parent_01<
;/td>
<td width="13%"
align="left"><font
size="1"><a
href="mailto:KenAutorabc.com"> Ken,
Autor</a></font></td>
<td width="8%"
align="left"><font
size="1"> </a></fon
t></td>
</div>
</TR>
<TR>
<div id='156'
style="display:none" name="156">
<div id='155'
style="display:none" name="155">
<td
width="20%" align="left"><a
onClick="alert('155');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=156">----------------Test_De
lete</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:KenAutorabc.com"> Ken,
Autor</a></font></td>
<td
width="8%" align="left"><font
size="1"> </a></fon
t></td>
</div>
</div>
</TR>
<TR>
<div id='33'
style="display:none" name="33">
<div id='29'
style="display:none" name="29">
<td
width="20%" align="left"><a
onClick="alert('29');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=33">--------DD Business Unit
IT Sponsor...</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:MichaelEBENabc.com"> Michael,
EBEN</a></font></td>
<td
width="8%" align="left"><font
size="1"> (123)438-
0050</a></font></td>
</div>
</div>
</TR>
<TR>
<div id='34'
style="display:none" name="34">
<div id='29'
style="display:none" name="29">
<td
width="20%" align="left"><a
onClick="alert('29');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=34">--------W&FP
Division Servi...</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:MichaelEBENabc.com"> Michael,
EBEN</a></font></td>
<td
width="8%" align="left"><font
size="1"> (123)438-
0050</a></font></td>
</div>
</div>
</TR>
<TR>
<div id='15'
style="display:none" name="15">
<td width="20%"
align="left"><a
onClick="showhide('15');"><img
src="../Images/plus.gif"
border="0" WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=15">COE - Deskside
Server</td>
<td width="13%"
align="left"><font
size="1"><a
href="mailto:KenAutorabc.com"> Ken,
Autor</a></font></td>
<td width="8%"
align="left"><font
size="1"> </a></fon
t></td>
</div>
</TR>
<TR>
<div id='126'
style="display:none" name="126">
<td width="20%"
align="left"><a
onClick="showhide('126');"><img
src="../Images/plus.gif"
border="0" WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=126">--------DaRTS Project
Solutions</td>
<td width="13%"
align="left"><font
size="1"><a
href="mailto:KenAutorabc.com"> Ken,
Autor</a></font></td>
<td width="8%"
align="left"><font
size="1"> </a></fon
t></td>
</div>
</TR>
<TR>
<div id='144'
style="display:none" name="144">
<div id='126'
style="display:none" name="126">
<td
width="20%" align="left"><a
onClick="alert('126');"><img
src="../Images/minus.gif" border="0"
WIDTH="16"
HEIGHT="16"></a>
<a
href="admin.asp?id=144">----------------Project
SvcsLaborGr...</td>
<td
width="13%" align="left"><font
size="1"><a
href="mailto:KenAutorabc.com"> Ken,
Autor</a></font></td>
<td
width="8%" align="left"><font
size="1"> </a></fon
t></td>
</div>
</div>
</table>
</td>
</tr>
</form>
</body>
<script LANGUAGE="JavaScript">
<!--
function showhide(obj) {
alert(obj)
var el = document.getElementById(obj);
alert(el.style.display)
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>
--- In 1stJavaScript@yahoogroups.com,
"austink_2004"
<austink_2004y...> wrote:
>
> Hi All,
> I am trying to create an expand / collapse div
functionality in my web
> page.
> The data is database driven, and goes down 3 levels.
(grandparent,
> parent and child... some have only one level, some have
two and
some
> have three)
>
>
> <!--
>
> <tr valign="top">
> <td valign="top">
> <table border="0"
width="100%">
> <%' if not rsResourceContacts is nothing
then%>
> <%' do while not
> rsResourceContacts.eof %>
> <TR>
> <%' sGroupDisplayName
> = ""
> if Len
>
(rsResourceContacts("group_display_name"))> 34
then
>
> sGroupDisplayName = mid(rsResourceContacts
> ("group_display_name"),1,34) &
"..."
> else
>
> sGroupDisplayName =
rsResourceContacts("group_display_name")
> end if
> %>
> <div
>
id='<%'=rsResourceContacts("group_id")%>'
style="display:none"
>
name="<%'=rsResourceContacts("group_id")%&
gt;">
> <%' if rsResourceContacts
> ("child_count") > 0 then %>
> <td width="20%"
> align="left"><a
onClick="showhide('<%'=rsResourceContacts
> ("group_id")%>');"><img
src="../Images/plus.gif" border="0"
> WIDTH="16"
HEIGHT="16"></a>
> <a
>
href="admin.asp?id=<%'=rsResourceContacts("grou
p_id")%
> >"><%'=sGroupDisplayName%></td>
> <td width="13%"
> align="left"><font
size="1"><a
href="mailto:<%'=rsResourceContacts
>
("primary_manager_email")%>">
<%'=rsResourceContacts
>
("primary_manager")%></a></font><
;/td>
> <td width="8%"
> align="left"><font
size="1"> <%'=rsResourceC
ontacts
>
("primary_manager_phone")%></a></font&
gt;</td>
> <%' elseif rsResourceContacts
> ("child_count") = 0 then %>
> <div
>
id='<%'=rsResourceContacts("parent_group_id")%&
gt;'
> style="display:none"
name="<%'=rsResourceContacts
("parent_group_id")%
> >">
> <td
> width="20%" align="left"><a
onClick="alert('<%'=rsResourceContacts
> ("parent_group_id")%>');"><img
src="../Images/minus.gif"
border="0"
> WIDTH="16"
HEIGHT="16"></a>
> <a
>
href="admin.asp?id=<%='rsResourceContacts("grou
p_id")%
> >"><%'=sGroupDisplayName%></td>
> <td
> width="13%"
align="left"><font
size="1"><a
>
href="mailto:<%'=rsResourceContacts("primary_ma
nager_email")%
>
>"> <%'=rsResourceContacts(
"primary_manager")%
> ></a></font></td>
> <td
> width="8%" align="left"><font
>
size="1"> <%'=rsResourceC
ontacts
("primary_manager_phone")%
> ></a></font></td>
> </div>
> <%' end if %>
> </div>
>
> <% 'rsResourceContacts.movenext %>
> </TR>
> <%' loop %>
> <%' end if %>
> </table>
> </td>
> </tr>
> </form>
> </body>
>
> -->
>
> <script LANGUAGE="JavaScript">
> <!--
> //function showhide(obj) {
> //alert(obj)
> // var el = document.getElementById(obj);
> //alert(el.style.display)
> // if ( el.style.display != "none" ) {
> // el.style.display = 'none';
> // }
> // else {
> // el.style.display = '';
> // }
> //}
> //-->
> </script>
>
>
>
>
>
>
> The display value does toggle, however, the code
doesn't
> expand/collapse the items
>
> Any ideas as to what would be wrong with this script?
>
>
> Thanks
>
> Austin
>
For a quick response, your message should include,
- A copy of the code
- A copy of any error messages
- A description of what you're trying to achieve
- A description of what's actually happening
http://www.trans4mind.com/personal_developmen
t/HTMLGuide/index.html For HTML
http://www.trans4mind.com/personal_developme
nt/JavaScript/index.html For
JavaScript You can also download the JavaScript and HTML
tutorials (Nearly
2.5 megabytes.) A 30 day version of jsEditor is available
for free download
at http://www.trans4mind.com/personal_devel
opment/JavaScript/freeEditor.htm
--------------------------
FREE zip/unzip program:
http://www.trans4mind.com/personal_development/z
ipper/index.html
--------------------------OR go to and change your settings:
http://g
roups.yahoo.com/group/1stJavaScript/
List owner: 1stJavaScript-owner@yahoogroups.com
://groups.yahoo.com/group/1stJavaScript/
List owner: 1stJavaScript-owner@yahoogroups.com
Yahoo! Groups Links
************************************************************
***********************
Any opinions expressed in email are those of the individual
and not necessarily those of the company. This email and any
files transmitted with it are confidential and solely for
the use of the intended recipient or entity to who they are
addressed. It may contain material protected by
attorney-client privilege. If you are not the intended
recipient, or a person responsible for delivering to the
intended recipient, be advised that you have received this
email in error and that any use is strictly prohibited.
Random House Group +44 (0) 20 7840 8400.
http://www.randomhouse.c
o.uk
http://www.booksat
transworld.co.uk
http://www.kidsatr
andomhouse.co.uk
************************************************************
***********************
For a quick response, your message should include,
- A copy of the code
- A copy of any error messages
- A description of what you're trying to achieve
- A description of what's actually happening
http://www.trans4mind.com/personal_developmen
t/HTMLGuide/index.html For HTML
http://www.trans4mind.com/personal_developme
nt/JavaScript/index.html For JavaScript
You can also download the JavaScript and HTML tutorials
(Nearly 2.5 megabytes.)
A 30 day version of jsEditor is available for free download
at
http://www.trans4mind.com/personal_devel
opment/JavaScript/freeEditor.htm
--------------------------
FREE zip/unzip program:
http://www.trans4mind.com/personal_development/z
ipper/index.html
--------------------------OR go to and change your settings:
http://g
roups.yahoo.com/group/1stJavaScript/
List owner: 1stJavaScript-owner@yahoogroups.com
://groups.yahoo.com/group/1stJavaScript/
List owner: 1stJavaScript-owner@yahoogroups.com
Yahoo! Groups Links
<*> To visit your group on the web, go to:
http://g
roups.yahoo.com/group/1stJavaScript/
<*> To unsubscribe from this group, send an email to:
1stJavaScript-unsubscribe@yahoogroups.com
<*> Your use of Yahoo! Groups is subject to:
http://docs.yahoo.c
om/info/terms/
|