www.webdeveloper.com
Results 1 to 5 of 5

Thread: hide div when radio button changes

  1. #1
    Join Date
    Jul 2011
    Posts
    8

    Question hide div when radio button changes

    I am trying to hide some content when a radio button is changed. I have been searching the internet for this, but the only thing I found that is close to what I wanted was done in .asp. I tried to convert it, but seeing I do not know Javascript very well, I was unsuccessful. I'm hoping someone here can help me set it right.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    
    <head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <title>Untitled 1</title>
    
    <script language="javascript">
      window.onload=function(){
         var rb = document.getElementsById('opt0');
         var d = document.getElementById('dvArea');
         if (rb.checked == true) {
    
                    d.style.visibility = "visible";
                }
                else {
                    d.style.visibility = "hidden";
                }   
      };
        </script>
    </head>
    
    <body>
    <form id="frmOptions">
      <input type="radio" name="options" id="opt0" checked="checked" />
      <label for="opt0">Option 1</label>
      <input type="radio" name="options" id="opt1" />
      <label for="opt1">Option 2</label>
    </form>  
    <div id="dvArea">
         Some contents
    </div>
    </body>
    
    </html

  2. #2
    Join Date
    Jun 2004
    Location
    Portsmouth UK
    Posts
    2,689
    Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
    
            <head>
            <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
            <title>Untitled 1</title>
    
            </head>
    
            <body>
            <form id="frmOptions">
              <input type="radio" name="options" id="opt0" checked="checked" onclick="check()"/>
              <label for="opt0">Option 1</label>
              <input type="radio" name="options" id="opt1" onclick="check()" />
              <label for="opt1">Option 2</label>
            </form>
            <div id="dvArea">
                 Some contents
            </div>
            <script language="javascript">
    
              function check(){
                 document.getElementById('dvArea').style.visibility =document.getElementById('opt0').checked?"visible":"hidden";
              }
    
              check();
               </script>
            </body>
    
            </html>
    Vic

    God loves you and will never love you less.

    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there cinci-hal,

    Our friend Vic supplied a solution whilst I was preparing mine.

    One minor difference in mine is that, I hide the form from those with javascript disabled.

    I also remove event handlers from the HTML.

    Code:
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
    
    <meta charset="utf-8">
    
    <title>untitled document</title>
    
    <style>
    #container {
        width:960px;
        margin:auto;
     }
    .hide{
        display:none;
     }
    #frmOptions label {
        cursor:pointer;
     }
    </style>
    
    <script>
    (function() {
       'use strict';
    
    function init(){ 
    
       document.getElementById('frmOptions').className='';
       var obj=document.getElementById('dvArea');
    
       var inp=document.getElementById('frmOptions').getElementsByTagName('input');
       var c=inp.length;
    
    while(--c>-1) {
       inp[c].number=c;
       inp[c].onclick=function(){
    
       this.number==0?obj.className='':obj.className='hide';
       }
      }
     }
       window.addEventListener?
       window.addEventListener('load',init,false):
       window.attachEvent('onload',init);
    })();
    </script>
    
    </head>
    <body>
    
    <div id="container">
    
    <form id="frmOptions" class="hide">
     <input type="radio" name="options" id="opt0" checked="checked">
     <label for="opt0">Option 1</label>
     <input type="radio" name="options" id="opt1" >
     <label for="opt1">Option 2</label>
    </form>
      
    <div id="dvArea">
    <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec 
    ultricies sollicitudin nisi, ut molestie felis adipiscing sit 
    amet. Sed auctor vehicula commodo. Nam a nibh neque, vitae 
    faucibus felis. Vivamus at metus eget eros consequat fringilla. 
    Quisque magna magna, laoreet eu tempus sit amet, fringilla at 
    tellus. Praesent felis tortor, scelerisque vitae fringilla 
    non, porttitor et lacus. Ut ut sapien nec quam tincidunt 
    consectetur in nec lacus.
    </p>
    </div>
    
    </div>
    
    </body>
    </html>
    coothead
    Last edited by coothead; 07-26-2013 at 12:23 PM.

  4. #4
    Join Date
    Jul 2011
    Posts
    8
    That is perfect! Thank you so much!

  5. #5
    Join Date
    Jan 2004
    Location
    chertsey, a small town s.w. of london, england.
    Posts
    1,478
    Hi there cinci-hal,

    I don't know which code took your fancy, but I will say...

    no problem, you're very welcome.


    ...for both of us.


    coothead

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