SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    very basic show/hide div with radio button

    hi, i have made this request as simple as possible.

    When my page loads I would like div1 and div2 to both be hidden


    If user clicks Div 1 radio then
    div1 = visible
    div2 = hidden


    If user clicks Div 2 radio then
    div1 = hidden
    div2 = visible


    very straightforward, if anyone can help me out here that would be great. thanks

    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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    
    <title>test</title>
    
    </head>
    
    
    <body>
    
    <p>Show Div 1:<input type="radio" id="pickfrom" value="pkfrom" /></p>
    
    <br />
    
    <p>Show Div 2:<input type="radio" id="pickfrom" value="pkfrom" /></p>
    
    <br />
    
    <div id="div1">
    <p>this is div 1</p>
    </div>
    
    
    <div id="div2">
    <p>this is div 2</p>
    </div>
    
    </body>

  2. #2
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The following should do what you want

    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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css" media="screen">
      .hide{
        display:none;
      }
    </style>
    </head>
    <body>
      
      <div id="tabs">
        <div id="nav">
          <p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
          <p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
        </div>
        
        <div id="div1" class="tab">
          <p>this is div 1</p>
        </div>
        
        <div id="div2" class="tab">
          <p>this is div 2</p>
        </div>
      </div>
      
      <script type="text/javascript" charset="utf-8">
        (function(){
          var tabs =document.getElementById('tabs');
          var nav = tabs.getElementsByTagName('input');
          
          /* 
          * Hide all tabs
          */
          function hideTabs(){
            var tab = tabs.getElementsByTagName('div');
            for(i in tab){
              if(tab[i].className == 'tab'){
                tab[i].className = tab[i].className + ' hide';
              }
            }
          }
          
          /*
          * Show the clicked tab
          */
          function showTab(tab){
            hideTabs();
            document.getElementById(tab).className = document.getElementById(tab).className.replace('hide', '');
          }
          
          hideTabs(); /* hide tabs on load */
          
          /* 
          * Add click events
          */
          for(i in nav){
            nav[i].onclick = function(){
              showTab(this.className);
            }
          }
        })();
      </script>
    </body>

  3. #3
    SitePoint Evangelist
    Join Date
    Feb 2005
    Location
    London, UK
    Posts
    422
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hi, thanks very much.

    it works in firefox but it does not seem to work in internet explorer

  4. #4
    SitePoint Enthusiast
    Join Date
    Nov 2006
    Posts
    68
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry missed a few bits for IE this, version should work

    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 http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <title>test</title>
    <style type="text/css" media="screen">
      .hide{
        display:none;
      }
    </style>
    </head>
    <body>
      
      <div id="tabs">
        <div id="nav">
          <p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" /></p>
          <p>Show Div 2:<input type="radio" name="tab" value="pkfrom" class="div2" /></p>
        </div>
        
        <div id="div1" class="tab">
          <p>this is div 1</p>
        </div>
        
        <div id="div2" class="tab">
          <p>this is div 2</p>
        </div>
      </div>
      
      <script type="text/javascript" charset="utf-8">
        (function(){
          var tabs =document.getElementById('tabs');
          var nav = tabs.getElementsByTagName('input');
          
          /* 
          * Hide all tabs
          */
          function hideTabs(){
            var tab = tabs.getElementsByTagName('div');
            for(var i=0;i<=nav.length;i++){
              if(tab[i].className == 'tab'){
                tab[i].className = tab[i].className + ' hide';
              }
            }
          }
          
          /*
          * Show the clicked tab
          */
          function showTab(tab){
            document.getElementById(tab).className = 'tab'
          }
          
          hideTabs(); /* hide tabs on load */
          
          /* 
          * Add click events
          */
          for(var i=0;i<nav.length;i++){
            nav[i].onclick = function(){
              hideTabs();
              showTab(this.className);
            }
          }
        })();
      </script>
    </body>


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
  •