1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Show/Hide a div without javascript

Discussion in 'HTML & Website Design' started by Celoxdesign, Sep 10, 2007.

  1. #1
    Hello,

    I want to create a hidden div element which get visible when you click on a link, but I'd like to do this without javascript since this element is the key content of my site and otherwise it wouldn't be accessible for users that have javascript disabled (which is about 5% of my users).

    So how can I make a div show & hide without javascript? Though, keep in mind that I know how to do the HTML and CSS to hide and show the div element, just need a function to actually change the CSS values.

    Celox
     
    Celoxdesign, Sep 10, 2007 IP
  2. kazhar

    kazhar Guest

    Messages:
    27
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #2
    You can do it with CSS.

    #div {
    display: none;
    }
    
    #div:hover {
    display: inline;
    }
    Code (markup):
    <div id="div">your content</div>
    Code (markup):
     
    kazhar, Sep 10, 2007 IP
  3. Celoxdesign

    Celoxdesign Guest

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I'm not searching for a hover function. I want a function for when you click on a link a hidden div gets visible (without javascript).
     
    Celoxdesign, Sep 10, 2007 IP
  4. Rasczak

    Rasczak Peon

    Messages:
    131
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #4
    well, that works well in FF< but forget about it in IE - IE only supports :hover method on links (<A>)
     
    Rasczak, Sep 10, 2007 IP
  5. Rasczak

    Rasczak Peon

    Messages:
    131
    Likes Received:
    4
    Best Answers:
    0
    Trophy Points:
    0
    #5
    it's much easier and elegant to solve it via JS - trust me... browsers handle it equally (not like CSS - see :hover in IE limitation, etc.)
     
    Rasczak, Sep 10, 2007 IP
  6. AstarothSolutions

    AstarothSolutions Peon

    Messages:
    2,680
    Likes Received:
    77
    Best Answers:
    0
    Trophy Points:
    0
    #6
    You must use some form of scripting to achieve this. If you dont want to have javascript on the client side the other option is to have serverside scripting to do this.

    Easy enough to do but you need to know which serverside languages/ frameworks your server supports before people can give an example script/ code to do it with
     
    AstarothSolutions, Sep 10, 2007 IP
  7. Celoxdesign

    Celoxdesign Guest

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    But that example isn't what I'm looking for anyways, maybe you know something?

    Yeah I know, but the easiest way in some cases is not the best. Maybe I'll just create an extra page where users can make the choice in what direction to go.
     
    Celoxdesign, Sep 10, 2007 IP
  8. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #8
    Sounds to me like you're looking for a technique which will show additional content without using JavaScript.

    It is possible, but it won't work in Opera and I'm not too sure about Safari or other browsers because I haven't gotten around to checking it yet. It uses :focus instead of scripting, which Opera doesn't completely support (ok, it does, but in a different manner in this case). You can check it out at http://www.pmob.co.uk/temp/hideandshow2-css.htm (not my site).
     
    Dan Schulz, Sep 10, 2007 IP
  9. Celoxdesign

    Celoxdesign Guest

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Ok thanks, will definitely check it out! Though, if it's not widely supported I'll probably won't use it.
     
    Celoxdesign, Sep 11, 2007 IP
  10. tripy

    tripy Guest

    Messages:
    32
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #10
    The only browser wide supported method to do this IS javascript.
    I don't see how you could do that without js and css ...
     
    tripy, Sep 11, 2007 IP
  11. Noddegamra

    Noddegamra Peon

    Messages:
    1,013
    Likes Received:
    23
    Best Answers:
    0
    Trophy Points:
    0
    #11
    You could do it with php, but it would require a page refresh.

    I'd do it with JS though.
     
    Noddegamra, Sep 11, 2007 IP
  12. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #12
    Well the good thing is that Paul O'Brien's example is covered by Internet Explorer and Firefox, which takes up about 90% of the browser market right there. Then you also have to factor in the fact that Firefox is built on the open source Gecko rendering engine, which covers browsers like Flock, Galeon and so forth. Which leaves Opera (Presto), Konqueror and Safari (KHTML/WebCore) as the main obstacles.

    Hang on, I'm going to see if Safari handles it. If it does, chances are very good that Konqueror will as well, which for once would leave Opera as the odd-man out. Edit: Does not work in Safari, meaning that three browsers need to support it for it to be considered ready for prime-time.
     
    Dan Schulz, Sep 11, 2007 IP
  13. kisamesama

    kisamesama Peon

    Messages:
    53
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #13
    hmmm with javascript it's so easy... but no clue how to do it with css
     
    kisamesama, Sep 12, 2007 IP
  14. Gordaen

    Gordaen Peon

    Messages:
    277
    Likes Received:
    12
    Best Answers:
    0
    Trophy Points:
    0
    #14
    Typically for showing/hiding divs, you have the div shown and use JavaScript to hide it when the pages loads. The JavaScript can also write a link to the page that will show the div when clicked. That way JS agents can use it as you describe and non JS agents will still see the info (just not have the hide/show functionality).

    Another option is to have the hide/show link's href go to a different page that has the info and have an onclick event to hide/show that returns false. That would accomplish the same as the previous paragraph, but the difference would be that the non JS agent would have to go to a separate page.

    Those are the only two (good) methods that I can think of that would accomplish mostly what you want and be cross-browser compliant.
     
    Gordaen, Sep 12, 2007 IP
  15. Celoxdesign

    Celoxdesign Guest

    Messages:
    128
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Thanks for all the replies! Since javascript is still the best option browser support-wise I did it with javascript.
     
    Celoxdesign, Sep 12, 2007 IP
  16. Menelmacar

    Menelmacar Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #16
    Hope I'm not annoying annyone by resurrecting a month-old thread, but I thought the following might be of interest to the original poster (and maybe other people):


    <span onmousedown="example1.style.visibility='visible'" style="text-decoration:underline">click here to show</span> /
    <span onmousedown="example1.style.visibility='hidden'" style="text-decoration:underline">click here to hide</span>:<br>
    <span id="example1" style="visibility:hidden">Example text.</span>


    This does work in Opera, btw, unlike the pmob.co.uk example earlier.
    I should note though, that while this doesn't invoke javascript, it still does get recognize as scripting or "active content" by browsers, so if a browser has scripting disabled it will most likely interfere with this.
     
    Menelmacar, Oct 17, 2007 IP
  17. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #17
    It's actually JavaScript, just inlined (bad form).
     
    Dan Schulz, Oct 18, 2007 IP
  18. Menelmacar

    Menelmacar Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #18
    "example1.style.visibility='visible'" is JavaScript, even though there's no script type declaration? So browsers standardly process any event-triggered statement as a JavaScript statement? Now I'm confused. :confused:
     
    Menelmacar, Oct 18, 2007 IP
  19. Dan Schulz

    Dan Schulz Peon

    Messages:
    6,032
    Likes Received:
    436
    Best Answers:
    0
    Trophy Points:
    0
    #19
    You're using an event handler to feed JavaScript code, that's why. And yes, that's JavaScript code (and scripting syntax).
     
    Dan Schulz, Oct 18, 2007 IP
  20. Menelmacar

    Menelmacar Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #20
    Ok, thanks. I had mistakenly thought javascript written within an html file always had to be declared with <script type="text/javascript">, and didn't realize that one could technically (albeit in bad form) write any kind of javascript code (and not just a function call) right there in the event handling statement. Thank you for setting me straight on that.
     
    Menelmacar, Oct 19, 2007 IP