This week's giveaway is in the EJB and other Java EE Technologies forum.
We're giving away four copies of EJB 3 in Action and have Debu Panda, Reza Rahman, Ryan Cuprak, and Michael Remijan on-line!
See this thread for details.
The moose likes HTML, CSS and JavaScript and the fly likes have two tables I am trying to use jquery accordion effect on Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login


Win a copy of EJB 3 in Action this week in the EJB and other Java EE Technologies forum!
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "have two tables I am trying to use jquery accordion effect on" Watch "have two tables I am trying to use jquery accordion effect on" New topic
Author

have two tables I am trying to use jquery accordion effect on

Matt Kohanek
Village Idiot
Ranch Hand

Joined: Apr 04, 2009
Posts: 483

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


True wisdom is in knowing you know nothing - Socrates
Matt Kohanek
Village Idiot
Ranch Hand

Joined: Apr 04, 2009
Posts: 483

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.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60050
    
  65

How is the text of the radio button clickable? Rather than band-aiding the effect, find out why the radio buttons are behaving badly in the first place and fix that.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Matt Kohanek
Village Idiot
Ranch Hand

Joined: Apr 04, 2009
Posts: 483

No I think I have been misunderstood, this is all acting as it should. Not sure where you were mislead. But anyway, it was an easy thing to do, just needed to use <label for="radio_id">

Here is the end result

So this is solved - thanks

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
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60050
    
  65

Matt Kohanek wrote:But if I click the text, the previous radio button stays selected.

Matt Kohanek wrote:No I think I have been misunderstood, this is all acting as it should.


These two statements are in direct conflict.
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: have two tables I am trying to use jquery accordion effect on
 
Similar Threads
Align Two Tables Vertically
JQuery custom theme does not work in JSP
Multiple jQuery accordions?
jquery accordion and tabs on the same page
How can I align elements that are in different <div>'s?