two collapsible tables, one toggle function, much frustration

1 New Member

Hello. I'm painfully new to this and am having trouble figuring out what I'm doing wrong... I have two small tables in a simple html file. I want each table to have the ability to collapse/expand when the user clicks selected text. I've attempted the javascript toggle function. I believe the problem is somewhere in how I'm calling the function, but I dont know exact what...

Any help would be much appreciated! Thanks!

[HTML]<html>
<head>
<script>
function toggle()
{
if(document.getElementById().style.display=='none' )
{document.getElementById().style.display = '';
}
else
{document.getElementById('ms').style.display = 'none';
}
}
</script>
</head>

<span onClick="toggle("ms");">-/+ </span>
<strong><font color="#0000ff">Product</font></strong>
<table id="ms" cellspacing="0" cellpadding="10" border="0">

<tr valign="top">
<td></td>
<td width="250">ONE</td>
<td>A</td>
</tr>

<tr valign="top">
<td></td>
<td>TWO</td>
<td>B</td>
</tr>

<tr valign="top">
<td></td>
<td>THREE</td>
<td>C</td>
</tr>

</table><br>

<span onClick="toggle("cat");">-/+ </span>
<strong><font color="#0000ff">Category</font></strong>
<table id="cat" cellspacing="0" cellpadding="10" border="0">

<tr valign="top">
<td></td>
<td width="250">FOUR</td>
<td>D</td>
</tr>

<tr valign="top">
<td></td>
<td>FIVE</td>
<td>E</td>
</tr>

<tr valign="top">
<td></td>
<td>SIX</td>
<td>F</td>
</tr>

</table><br>
</body>
</html>[/HTML]

Sep 22 '06 #1

Subscribe Reply

5215

acoder

16,027

Recognized Expert Moderator MVP

Four problems:

When calling toggle in the span onclick, you're using double quotes within double quotes.
The toggle function requires an argument to capture the passed id string
document.getElementById needs an id to get an element.
Use the passed id for the else part otherwise it will collapse the wrong table

Here's the modified code:

Expand|Select|Wrap|Line Numbers

 <html>

<head>

<script>

function toggle(id)

{

if(document.getElementById(id).style.display=='none' )

{document.getElementById(id).style.display = '';

}

else

{document.getElementById(id).style.display = 'none';

}

}

</script>

</head>
 
<span onclick="toggle('ms');">-/+ </span>

<strong><font color="#0000ff">Product</font></strong>

<table id="ms" cellspacing="0" cellpadding="10" border="0">
 
<tr valign="top">

<td></td>

<td width="250">ONE</td>

<td>A</td>

</tr>
 
<tr valign="top">

<td></td>

<td>TWO</td>

<td>B</td>

</tr>
 
<tr valign="top">

<td></td>

<td>THREE</td>

<td>C</td>

</tr>
 
</table><br>
 
<span onclick="toggle('cat');">-/+ </span>

<strong><font color="#0000ff">Category</font></strong>

<table id="cat" cellspacing="0" cellpadding="10" border="0">
 
<tr valign="top">

<td></td>

<td width="250">FOUR</td>

<td>D</td>

</tr>
 
<tr valign="top">

<td></td>

<td>FIVE</td>

<td>E</td>

</tr>
 
<tr valign="top">

<td></td>

<td>SIX</td>

<td>F</td>

</tr>
 
</table><br>

</body>

</html>

May 17 '08 #2

Similar topics

Collapsible tables

by: Bootstrap bill | last post by:

I'm looking to create collapsible tables, similar to the outlines available in Microsoft Excel and Open Office spreadsheet. I'd prefer something cross platform. Is something like this available...

Javascript

Toggle the "Caps Lock" key

by: Steven | last post by:

Can anyone tell me how to toggle the "Caps Lock" key? Thanks in advance

Visual Basic .NET

Dynamic Collapsible Tables for any number of tables

by: mht7 | last post by:

I'm newbie to javascript and I did an extensive search on this site and couple of others looking for directions. I'm attempting to write some custom javascript for collapsing the tables and fit it...

Javascript

Adding an additional submenu to a collapsible/expandable menu

by: Jonathan | last post by:

Hello All, I am in the process of creating a 2/3 level collapsible/exspanible menu (called "nav") where users can click on a category and have the submenus appear beneath it and so on (allow...

Javascript

Collapsible table sorting problem

by: Kamal | last post by:

Hello all, I have a very simple html table with collapsible rows and sorting capabilities. The collapsible row is hidden with css rule (display:none). When one clicks in the left of the...

Javascript

collapsible panel and window.open javascript in ASP.net

by: ting ting | last post by:

I am working on a ASP.net 2.0 version and I want to click a button to open a window. I was using window.open to write at vb side. Response.Write("<Script...

.NET Framework

document.getElementById(toggle[i]) has no properties

by: swiftouch | last post by:

I'm getting an error message in FF2.0: document.getElementById(toggle) has no properties The goal of the script is, when I hover my mouse over an image, to make one div element visible while...

Javascript

Regarding Ajax Collapsible panel......

by: mahesh123 | last post by:

I am using Collapsible Panel in my project.But in other form of my project i want to use collapsible panel inside other Collapsible panel.Is it possible. Both panels are to be dinamic.Is it possible...

.NET Framework

Nested Collapsible Tables

by: dagabe14 | last post by:

Hi, this is my first time posting here, so be please be nice. If i do something incorrectly (and admin notices), please let me know of my mistake. So, I am attempting to make nested tables that...

Javascript

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...

General

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new...

Microsoft Access / VBA

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp