Hi
I have two tables, each of them 2x2. The first row is a radio button in the first cell and some header text in the next cell. The second row has a blank cell and the last cell has some text. Both tables look the same, one on top of the other:
(i hope that came out the same on everyone's screen - if not I was trying to do a simple ascii drawing of the table)
I would like to use the jquery accordion effect on this. By default I want the page to load with the first table open, and only the first row of the second table exposed. If you click on the second table header, the first closes and the second opens. So you can only ever have one table body text exposed at any time, and never have both closed at the same time.
I have tried various setups with jquery to accomplish this, but have not had much luck. The best I can do is put each table between its own div that calls the accordion effect. This somewhat works, but you can open both or neither table at the same time, which is not desirable. Here is what I mean (this is accomplished by really messing with the table, it is more like 2 1x2
tables here)
My hope was that I could just enclose both tables in one div tag. Then have the first row of each table be the header, and the second row of each table be the div that was hidden/unhidden when you click on the header. But that has an odd effect. If you click any of the top table it hides/unhides the entire bottom table, I am not sure why.
Here is what I mean
So any suggestions would be great. I have been looking at the table accordion effect example
here but I do not see how I can have closing and opening one table ensure that the other table is closed or open - remember I only want one table open at any time, and never have both closed