Very basic toggle show/hide div based on radio button

JavaScript
1

I need to toggle visibility of 2 divs based on

I found this script that alsmost works for me:

<!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" checked /></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>

I just need div1 to be displayed on page load. Any suggestion are warmly welcome :slight_smile:

2

[QUOTE=barrydocks;5658245I just need div1 to be displayed on page load. Any suggestion are warmly welcome :-)[/QUOTE]

Add this just before the closing curly brace:

showTab("div1");

This gives you:

<!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" checked /></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);
        }
      }

      showTab("div1");
    })();
  </script>
</body>
</html>
3

thankyou :slight_smile: