SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS Visibility & Display to make [+] & [-] drop down

    Here's the low down, I want to have a text link that says

    [+] Details

    When you click on it, the hidden layers will appear with details
    and [+] Details
    will become
    [-] Details

    The hidden layer that appears once you press on the plus must take up space, the space must not already be reserved. Meaning, when I click on [+] Details the hidden details should just push down anything and make it's space.

    Just like an XML sheet.

    Thanks!
    Free Picture and Video Hosting
    [http://photocabin.com][http://madproject.com]

  2. #2
    SitePoint Addict madproject.com's Avatar
    Join Date
    Jan 2003
    Location
    Ottawa, Canada
    Posts
    268
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    All this without having to reload the page.
    Free Picture and Video Hosting
    [http://photocabin.com][http://madproject.com]

  3. #3
    Super Ninja Monkey Travis's Avatar
    Join Date
    Dec 2001
    Location
    Sioux City, Iowa
    Posts
    691
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That would require javascript.
    Travis Watkins - Hyperactive Coder
    My Blog: Realist Anew
    Projects: Alacarte - Gnome Menu Editor

  4. #4
    Back in Action Winged Spider's Avatar
    Join Date
    Jun 2001
    Location
    outside my mind
    Posts
    900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Depends.

    If your have a good idea of where exactly where the content will be, as in fixed, you could use a easy script like this: http://www.dyn-web.com/dhtml/show-hide/

    If your page is fluid and those details will be all over the place it will be a lot harder to get the show-hide layer support to work correctly.

  5. #5
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    Connecticut
    Posts
    173
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hm. Normally I would use Javascript for this, but if you take the code on meyerweb.com/eric/css/edge and change it from :hover to :active.. I'll have to try that. It's Mozilla-only, though..

  6. #6
    gingham dress, army boots... silver trophy redux's Avatar
    Join Date
    Apr 2002
    Location
    Salford / Manchester / UK
    Posts
    4,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    slightly off topic, but: stumbled across this the other day http://devedge.netscape.com/toolbox/...03/CTOCWidget/
    re·dux (adj.): brought back; returned. used postpositively
    [latin : re-, re- + dux, leader; see duke.]
    WaSP Accessibility Task Force Member
    splintered.co.uk | photographia.co.uk | redux.deviantart.com

  7. #7
    SitePoint Guru wild boar's Avatar
    Join Date
    Aug 2003
    Location
    illinois
    Posts
    793
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think dhtmlcentral.com has this script

  8. #8
    SitePoint Enthusiast
    Join Date
    Sep 2003
    Location
    Singapore
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I suddenly thought of utilizing

    { height:1em }
    and
    { overflow:hidden }

    plus negative atrocious padding/margin to hide and redisplay stuff...

  9. #9
    SitePoint Member
    Join Date
    Aug 2003
    Location
    Los Angeles
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Project VII has a good tutorial on how to make this type of navigation. The tutorial includes a Dreamweaver extension and tutorial files.

    http://www.projectseven.com/tutorial...lass/index.htm


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
  •