469,908 Members | 2,213 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,908 developers. It's quick & easy.

Showing/Hiding <tr> s

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 -
<tr id="fname"> <td> ... </td> <td> ... </td> </tr>
<tr id="lname"> <td> ... </td> <td> ... </td> </tr>
<tr id="mname"> <td> ... </td> <td> ... </td> </tr>

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
to expand the group again, the arrangement of rows/columns goes

Is there something that I am doing wrong?

- Anand

Aug 23 '05 #1
2 2015
c.**********@gmail.com wrote:
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.

David Dorward <http://blog.dorward.me.uk/> <http://dorward.me.uk/>
Home is where the ~/.bashrc is
Aug 23 '05 #2

David Dorward wrote:

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

Aug 23 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

2 posts views Thread by John Geddes | last post: by
4 posts views Thread by El Diablo | last post: by
1 post views Thread by prefersgolfing | last post: by
3 posts views Thread by jack | last post: by
1 post views Thread by Waqarahmed | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.