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[i]);
if (obj.showing == null || obj.showing == 1) {
obj.showing = 0;
}
else {
obj.showing = 1;
}
displayObject(arguments[i], 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
