SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hiding divs without Javascript

    Is there a way to hide divs and click a link to make them show, without resorting to adding javascript?

    On a side note, this is being asked to make a dynamic menu, I'm aware there are sliding vertical menus using pure css out there, just curious otherwise.

    Thanks.

  2. #2
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    http://www.google.com/search?q=css+only+menu

    Here is a good one:
    http://www.cssplay.co.uk/menus/final_drop.html

    Actually, almost all of them incorporate :hover css selector technique.
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I appreciate the help but I was looking for vertical not horizontal. And I tried google, but wasn't turning up anything so I asked here. I don't want the menu to mouse-over and open up, I want it to open up on-click.

  4. #4
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    Is there a way to hide divs and click a link to make them show, without resorting to adding javascript?
    Ok, got it. So the answer is no.
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  5. #5
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is possible but I wouldn't recommend doing it without JS - I'm not sure if it works in all browsers anyway...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  6. #6
    SitePoint Addict
    Join Date
    Dec 2007
    Posts
    358
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is possible but I wouldn't recommend doing it without JS
    How exactly it can be done? With :visited?
    I'm creating trouble-free Apache, PHP, MySQL installer, WITSuite,
    and use it to setup my development environment.
    Demo, support, contact. Questions?

  7. #7
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With :active (in IE) I think...
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  8. #8
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    You do it with :hover but it will not work with IE6 and earlier.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  9. #9
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    @Felgall - The OP wants it done "on click"
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  10. #10
    SitePoint Wizard bronze trophy Tailslide's Avatar
    Join Date
    Feb 2006
    Location
    Bedford, UK
    Posts
    1,687
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Personally I'd use javascript as this sounds like behaviour not presentation. There are several scripts out there that will do this but fail-safe without JS on. There's nothing wrong with Javascript per se - it's just how it's implemented.
    Little Blue Plane Web Design
    Blood, Sweat & Rust - A Land Rover restoration project

  11. #11
    Function Curry'er JimmyP's Avatar
    Join Date
    Aug 2007
    Location
    Brighton, UK
    Posts
    2,006
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I found an example of what I was talking about - http://www.cssplay.co.uk/menu/click_gallery

    Although I do agree with Tailside - You should use JavaScript.
    James Padolsey
    末末末末末末末末末末末末末末末末末末末
    Awesome JavaScript Zoomer (demo here)
    'Ajaxy' - Ajax integration solution (demo here)

  12. #12
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It can be done with :focus but it'll only work in IE and Firefox. To this date, neither Opera nor Safari properly support :focus in such a manner as to make this technique possible (which is a shame if you ask me).

  13. #13
    SitePoint Enthusiast
    Join Date
    May 2008
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Ok thanks everyone for the discussion, you're input was appreciated. For anyone else reading www.cssplay.co.uk is a great place to find some hover examples, and to sum it up there is no way to achieve it without javascript in all browsers.


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
  •