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.get ElementById().s tyle.display==' none' )
{document.getEl ementById().sty le.display = '';
}
else
{document.getEl ementById('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">FOU R</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

5230

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.getEle mentById 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

2069

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 online? I've been searching for months, but haven't found anything remotely close. -- "It's easy enough to be pleasant, when life hums along like a song. But the man worth while is the man who can smile when

Javascript

3439

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

7725

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 in an existing application already provided. I found some code on the web that works great. In this example there are 3 fixed set of tables with 3 fixed/hardcoded "id". I tried to fit this code into a FOR loop so it becomes dynamic and it would work...

Javascript

5847

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 users to click on another category and have that expand). Example:

Javascript

4811

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 expandable row, the hidden row is made visible with css. The problem is when i sort the rows, the hidden rows get sorted as well which i don't want and want to be moved (while sorting) relative to their parent rows. The following is my complete html code...

Javascript

4230

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 language='JavaScript'>window.open('Report.aspx"')</Script>") It works fine and open the Report.aspx at another window, however, my parent window contains a collapsible panel which can't function after clicking that button. Why is it happen? Can the collapsible panel and window.open...

.NET Framework

1954

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 making all the others div elements in the array, hidden. thisDocId is the element to avoid hiding. This is the script: <script>

Javascript

1638

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 can any one help me plz. My requirement is I am having different A's. Under each A Can have different B's. For each B can have diffrent C's.

.NET Framework

5613

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 can be toggled and collapse, the problem is that the javascript code that I have does not support that, and I do not know enough javascript to fix it. here is the code <script language="javascript">

Javascript

8251

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, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

8688

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, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8635

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that captivates audiences and drives business growth. The Art of Business Website Design Your website is...

Online Marketing

8352

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 Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For most users, this new feature is actually very convenient. If you want to control the update process,...

Windows Server

7178

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

5570

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 then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4085

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 last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

4188

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1496

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General