Show/Hide based on selection

Discussion in 'CSS' started by norbert_ds, Jul 23, 2009.

0
  1. #1
    Hi all,

    I have a drop down list in a form. On selection of one of the items in that drop down list, I need another form element displayed.

    I am hoping to do this using Pure CSS. Any help/suggestions/ideas or links to tutorials would be most appreciated.

    Thanks in advance!

    Regards
    Norbert
     
    norbert_ds, Jul 23, 2009 IP
  2. nonameperson

    nonameperson Peon

    Messages:
    58
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    I found something on google... Maybe it will be useful for you: pixelspread.com/blog/289/css-drop-down-menu
     
    nonameperson, Jul 24, 2009 IP
  3. norbert_ds

    norbert_ds Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Hi,

    What you have attached is a navigation menu bar. This is not actually what I am after. In javascript we would call what I am explaining to be a show/hide behaviour. I am trying to achieve the same with pure CSS.

    Thanks however!

    Norbert
     
    norbert_ds, Jul 26, 2009 IP
  4. bjnix04

    bjnix04 Greenhorn

    Messages:
    38
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #4
    Never heard of anything like that before, I hope someone can shed some like on this...
     
    bjnix04, Jul 27, 2009 IP
  5. norbert_ds

    norbert_ds Peon

    Messages:
    3
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    Have a look at this link.

    This is what I am after but this involves a bit of javascript which I want to leave out and use pure CSS.

    www.frinity.com/posts/css/show-hide-form-field-selecting-a-radio-button-option
     
    norbert_ds, Jul 27, 2009 IP
  6. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Norbert:

    sorry to say, the hide and show you are looking for is not workable cross-browser in pure CSS.

    In browsers who leave the :focus on previously clicked elements, there is a way to kinda get it working, where when the parent element has :focus, children show.

    Since it only works in like, I think it was FF and one other browser, it's not practical.

    What you will want to do is build the form with ALL options available, and clearly, visually separated. For those with Javascript available, you'll need a script who, onload, hides the stuff that needs to be hidden (by giving those elements a CSS class you've already written, and for screen reader users who can do javascript, you would maybe want to have those "hidden" elements become position: absolute and left: -bazillion units), and use regular JS user interaction to bring things back onscreen by toggling that "hidden" class off.

    This is currently the best way that I know of. CSS doesn't have a concept of "states" other than the pseudoclasses, which even now aren't fully supported (IE7 doesn't do :focus correctly, and IE doesn't support :target at all as far as I know), nor does CSS understand "onclick". Pretty much anything you want to happen "when the user clicks" will need a script, at the very least because you want certain elements to have a stable state... you may have seen people doing something like this with just :hover (such as with Mega menus like at FoodNetwork.com) but those are reliant on people having mice, work buggy for keyboarders (fixed with Javascript, but then, only if they indeed HAVE javascript), and of course the state is lost when the mouse moves away.

    If you are interested in Screen readers and Javascript, you may run into some questions about using Javascript with them. I found a nice article from 2008 here: http://northtemple.com/2008/10/07/javascript-and-screen-readers
     
    Stomme poes, Jul 31, 2009 IP