Grow your CSS skills. Land your dream job.

Help with hiding individual rows of a column on demand

  • # September 14, 2008 at 11:14 am

    What I have is a giant list with three columns. The first two columns are very important and need to be shown at all times. The third column is just an added paragraph about whatever was in the second column in the corresponding row.

    So it looks something like this:

      Column One — Column Two — Column Three
      Column One — Column Two — Column Three
      Column One — Column Two — Column Three
      Column One — Column Two — Column Three[/list:u]
      Where in each case #3 needs to be able to be hidden or shown on command, for instance by hitting a tiny + or – sign or something, because it is going to end up stretching my list out in ways it doesn’t need to.

      An added bonus would be if I could hit the expand/minimize button and have the third column’s contents appear

    under the second column.

    Any ideas anyone?

    # September 14, 2008 at 12:05 pm

    The simplest way is using jquery javascript library’s "toggle" function.
    You give the 3rd column a class name, than use the toggle function to show/hide it.

    $("#button").click(function () {
    $(".third").toggle();
    });

    "third" is the class name of the third column, and "button" is the id of the plus/minus button.
    Let me know it was clear or you’d like me to explain it in more details.

    If you don’t want to use jquery, you can use javascript but its a little bit more compicated..

    # September 16, 2008 at 11:56 am

    Nope, that works, thanks. :]

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".