• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

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

 
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Matt Kohanek
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
Matt Kohanek
Village Idiot
Posts: 484
jQuery Oracle Java
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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.
 
This is my favorite tiny ad:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic