SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Expand/ Collapse datatable

    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.
    -=SunnaH=-

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,116
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    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.

  3. #3
    SitePoint Addict SunnaH's Avatar
    Join Date
    Aug 2005
    Posts
    263
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    -=SunnaH=-


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •