Showing/Hiding <tr> s

[c.anandkumar]

Hi All -

I have some problems getting a small piece of javascript working
correctly for Firefox. Here is what I am trying to do -

1. I have a form (like a search form)
2. I have many groups of searchable fields in the fields
3. Each group can be expanded/collapsed by clicking on a link
"(Fewer|More) Options" which sits right next to the group title.

For eg. -
I can search a person on "Name" - this group, "Name" has one field,
"First Name" in the collapsed state and more searchable fields ("Last
Name", "Middle Name") in the expanded state.

To achieve this, what I did was -

1. All the fields in one table
2. One row for each Label/Text-Box pair
3. Two columns on each row, the left one for Label and the right one
for Text-Box

For collapsing/expanding purposes, I had assigned an ID to each <tr>
that can be hidden/shown. And I had used the following js functions for
doing the same -

function toggleFields() {
var i = 0;
var src = document.getElementById(arguments[0]);
if (src.state == null || src.state == 'more') {
src.state = 'few';
src.innerHTML = 'Fewer Options';
}
else {
src.state = 'more';
src.innerHTML = 'More Options';
}
for (i = 1; i < arguments.length; i++) {
var obj = document.getElementById(arguments);
if (obj.showing == null || obj.showing == 1) {
obj.showing = 0;
}
else {
obj.showing = 1;
}
displayObject(arguments, obj.showing);
}
}
function displayObject(id, show) {
var obj = document.getElementById(id);
if (obj==null) return;
obj.style.display = show ? 'block' : 'none';
obj.style.visibility = show ? 'visible' : 'hidden';
}


The HTML is something like this -
<table>
<tr id="fname"> <td> ... </td> <td> ... </td> </tr>
<tr id="lname"> <td> ... </td> <td> ... </td> </tr>
<tr id="mname"> <td> ... </td> <td> ... </td> </tr>
</table>

And the link to expand/collapse this group is like this -
<a id="nameToggle" href="toggleFields('nameToggle', 'lname', 'mname')">
Fewer Options </a>

The problem that I am facing -
1. It works well in IE-6.0
2. Goofs up the UI in Firefox-1.0.4 -
Works well the first time, (i.e., hiding lname and mname), but when
trying
to expand the group again, the arrangement of rows/columns goes
amiss.

Is there something that I am doing wrong?

Thanks
- Anand

 

[David Dorward]

obj.style.display = show ? 'block' : 'none';

2. Goofs up the UI in Firefox-1.0.4 -

In CSS 2 browsers, <tr> elements have a default display of table-row, not
block. Toggle between "none" and "" instead.

 

[c.anandkumar]

In CSS 2 browsers, <tr> elements have a default display of table-row, not
block. Toggle between "none" and "" instead.

Great! It works well now.
Thanks for your help
- Anand