jQuery Examples – Horizontal Accordion - Table instead of Un-ordered Lists - UPDATED

Question

Ok I got it working for anyone who needs this :)

[Original Statement/Question]
Here is and example of what I\'m trying to do (But on clic

Answer 1

Okay, I am completely re-editing this, because I looked more into your problem and saw that the white-space was an issue.

Like I said before, use white-space: pre-wrap not pre to avoid distortion. There is an IE equivalent as well.

First, here is an example demonstrating re-sizing the td elements and removing the style for others. It is hard-coded, but can be manipulated to fit your needs.

http://ece.arizona.edu/~justinvh/test.html

Here is the html:

      
    
    
    
  
  
    

      

        

          
A
          
B
        
      
      

        

          

            
Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            
          
          
                      
            
Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            
          
        
        

          

            
Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby! Hello, my baby!
            
          
          
Hello, my baby!
        
      
    
  

Here is the JavaScript:

So, some things to note. I use the nth-child selector to get the elements of the td that correspond to the th by looping over each th and applying a function that consumes the environment (to avoid references). This can obviously be done in multiple ways.

You can apply this CSS using 'complete' callback on animate and do it that way.

I purposely fully qualified the selectors so you can see how they should work. You can add identifiers/classes to whatever means is necessary.

Let me know if this works for you.