Very basic show/hide div with radio button

JavaScript
1

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

<!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

The following should do what you want


<!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

hi, thanks very much.

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

4

Sorry missed a few bits for IE this, version should work


<!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>