Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts

    DIV to expand table...

    Hello all. I am wanting to have a table that is 4 columns by 6 rows. Each cell will have heading and some options below them. What I want to do is for the page to load with the table collapsed as small as possible, only showing the headings, and when you click on the heading, the options will expand in a <div> whereby expanding the cell and pushing the other headings down. Is this easily possible? It is ok if the whole row expands if any of the divs in that row are selected.

    Thanks,

    Parallon

  • #2
    Regular Coder
    Join Date
    Nov 2009
    Posts
    110
    Thanks
    7
    Thanked 9 Times in 9 Posts
    You probably need to use Javascript to do this. There are numerous free scripts available that will do this if you dig around google for a while.

    Another way is to use firebug (firefox extension) and look at the scripts that do this on other websites since often you can learn the name of the script and then just go search for that script in particular (there is a good chance they used a readily available free script).

    I would recommend you consider progressive enhancement when implementing features like this, make so that without javascript they are all expanded. Then if the script loads they collapse and can be expanded with a click.

    www.graduationstoles.net is a site my colleague built which uses exactly that sort of script. But is a prime example of how not to do this (he is working on fixing it now, but I can't even help him because it is such convoluted code and it is built in asp.net). As it is now on that site, if you have JS disabled there is simply no way to expand those cells and see the content. Much better for SEO too if they were expanded by default and then only collapsed when the JS loaded (since search engines' bots don't use JS).

  • #3
    Regular Coder Doctor_Varney's Avatar
    Join Date
    Mar 2008
    Location
    Midlands, UK
    Posts
    649
    Thanks
    45
    Thanked 29 Times in 28 Posts
    Hi, Parallon. What exactly is it you are building there? In other words, what do you intend to put inside those table cells?

    Depending on the type of content/data you are hoping to display, there might be a better way of doing this, just using divs. This all depends on whether you really need a table in there or whether you are trying to use the table as a layout device.
    Last edited by Doctor_Varney; 01-16-2010 at 01:58 AM.
    Definition: Computer rage is a heightened physiological response with associated feelings of anger and frustration[1] resulting from using a computer or other complex electronic device. It may result in the physical assault of the computer or similar item.[2] Computer use often leads to verbal abuse and occasionally physical violence towards the object.[3] Computer rage may be caused by distress due to a hardware or software problem which the enraged person is unable to correct.

  • #4
    Regular Coder
    Join Date
    May 2005
    Posts
    215
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thank you both for your replies. I think I found a tutorial that might work, and am in the middle of testing it. Doctor_Varney, what I am wanting within these divs are a series of checkboxes. This will be a pre-work safety checklist. Each div will be a category, and when they expand that category, they will see the relevant options. With 22 different categories and 235 options, I just didn't want to have a big table displayed when they open the page.

    Thanks again linehand,

    Parallon


  •  

    Posting Permissions

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