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
True wisdom is in knowing you know nothing - Socrates
Well not long after posting this I figured out a way to handle this. I have a new problem that I am a bit unsure the best way to handle. Here is how I have solved this
The problem is, you can click on the radio button and it will open or close the correct table. But you can also click on the text next to the radio button to open and close the tables (which is OK). But if I click the text, the previous radio button stays selected. So I need to find a way to select the corresponding radio button when clicking on header text.
I have found a way to accomplish this, but the performance hit is unacceptable. I just add this
to the jqeury call that hides/shows the table text. Basically that line says look for the element that has onclick="Payment_CC();" as an attribute/value pair. This works, but the performance hit is so terrible it often crashes the page.
edit - the text of the radio button was clickable in the same way as the text you are reading now is clickable. I intended for a user to be able to click on the radio button OR the text next to the radio button and have it trigger certain events. My linked example shows what I mean