Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Help with hiding individual rows of a column on demand

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #23246
    Towers
    Member

    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?

    #49777
    sydo
    Member

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

    #49822
    Towers
    Member

    Nope, that works, thanks. :]

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.