www.webdeveloper.com
Results 1 to 7 of 7

Thread: [RESOLVED] Radio Buttons to Show/Hide DIVS

  1. #1
    Join Date
    Jul 2004
    Location
    Wisconsin
    Posts
    188

    resolved [RESOLVED] Radio Buttons to Show/Hide DIVS

    Hello,

    I'm trying to get my form to show and hide various divs with radio buttons. There are multiple options in the second box of my example. When a user selects the first option, more input boxes come up. Perfect, that's what I want. However, if they decide they didn't mean to click that option and instead wanted another option, the original part that popped up doesn't disappear. I cannot figure out how to make this happen. Can you help?

    Site here: http://www.uwstout.edu/static/housin...Spring/bye.asp
    Thank you

  2. #2
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    Check this earlier thread: showthread.php?t=209567

  3. #3
    Join Date
    Jul 2004
    Location
    Wisconsin
    Posts
    188
    Thank you for your reply and post reference. I don't have a high enough understanding of javascript to understand how to utilize the example you provided. Do you have any quick tips about the parts of the code or examples of how it can be used?
    Thank you

  4. #4
    Join Date
    Jul 2004
    Location
    Wisconsin
    Posts
    188
    Well, I just noticed you provided the soduko puzzle solver. I checked the source and looked to see how the javascript was utilized. It appears to be very similar to mine. My problem is that I can get a div to show and hide with radio buttons. My problem comes in when I need to show a div and then hide it when another div is selected and another div shows then. Kind of difficult to explain but if you check the site I provided you will see what I mean. I just need to know how to make multiple things happen "onClick"...

    onclick="hideDiv('coop') showDiv('leavingNow')" doesn't work. Am I close?

  5. #5
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    Code:
    function showPage(sPage, bShow) //hides all but selected div
    {
    	var div = document.getElementById(sPage);
    	div.style.visibility = bShow ? 'visible' : 'hidden';
    	div.style.position = bShow ? 'static' : 'absolute';
    }
    function setPage(sPage)
    {
    	showPage('start', sPage == 'start');
    	showPage('details', sPage == 'details');
    	showPage('solver', sPage == 'solver');
    	showPage('about', sPage == 'about'); 
    }
    ......
    if (right conditions are met) setPage('about');
    is how it's used. The visibility and position attributes are changed on all divs but only the one you selected becomes visible. You only have to specify one function on your onClick statement on the form, i.e., onClick="setPage('solver');"

  6. #6
    Join Date
    Jul 2004
    Location
    Wisconsin
    Posts
    188
    haha! That's fantastic. Thank you!

  7. #7
    Join Date
    Sep 2008
    Location
    Jackson MS
    Posts
    374
    You're welcome. Glad it worked out.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles