I'm working on something complex (for my standards at least) in jQuery and am completely stuck on how to move forward. I more or less see the structure in my head but having difficulties writing it down into properly working jQuery code:
- When clicking next or previous, the next or previous column should be highlighted, this works fine.
- Once you are at the last column (R6) and click next one new element should appear (R7) and R1 should be removed. R7 and further cols are already in the html, but are made invisible with CSS. How can I make R7 appear and R1 disappear and so on?
The invisble tables are already in the html code, you can see it in the top right table with the race description once you click further then R6, it will continue to R7 up to R12.
The logic I have in my mind is something like this:
- When user arrives at last visible R and clicks next, add class 'invisible' to the R on the left and add class 'visible' to R on the right. T
- When user clicks previous the opposite of above should happen.
The tricky part is to get the next Rn appear once it is at the last one..
Thanks for looking into my code: http://jsfiddle.net/yunowork/hVHZb/