I am working with JSF pages and the Primefaces framework. Ultimately, it writes xHTML. The effect I am after is allowing a user to see a limited number of columns in a table and if they choose show the rest of the columns onClick of a button. For example, the initial time a user comes to the page the table is presented as 6 columns for each record. If the user wishes to see all 100 columns the user clicks an expand button which will reveal. Similarly if the user wants to get a limited view a click on a different button will collapse the view back to 6 columns. This transition would be nice it if was a fade or slider. I do not want a on/off switch. Any insight or link to working example? Thanks.
Are you seriously creating a table with 100 columns?
One thing you could do is use a wrapper with overflow: hidden to crop the columns that you want to hide. Then you just need to transition the widths of the heading cells of the first 6 columns to collapse / expand.
Thank you for the advice. I know it is ridiculous. I solved this issue. Instead of using a dynamic table I am toggling back and fourth with a fade transition between 6 and the rest of the columns. The client at this time does not know what they want. So it is actually for demonstration purposes.