Basic show/hide toggle script

JavaScript
1

I need to show and hide a pair of submit buttons depending on the user selection of a radio button. I found a script that nearly fits my requirements on this post http://www.sitepoint.com/forums/showthread.php?608874
Here’s the 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>

The only thing I need is for the first radio button to be selected on page load. I suspect there is a simple modifaction needs and I would be grateful for some advice. Many thanks.

2

The only thing I need is for the first radio button to be selected on page load. I suspect there is a simple modification needed and I would be grateful for some advice. Many thanks.

The attribute “checked” will do that for you. :slight_smile:


<p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" [COLOR="#0000FF"][B]checked[/B][/COLOR] /></p>
3

Thanks for the reply.
Adding the checked attribute does select the first radio button on page load but it does not display the associated div, sorry I should have been more specific.

4

Solved it with this code, which is probably simpler:

<!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>
 <script type="text/javascript">
<!--
top.visible_div_id = 'right';
  function toggle_visibility(id) {
     var old_e = document.getElementById(top.visible_div_id);
     var new_e = document.getElementById(id);
     if(old_e) {
        console.log('old', old_e, 'none');
        old_e.style.display = 'none';
     }
    console.log('new', new_e, 'block');
     new_e.style.display = 'block';   
     top.visible_div_id = id;          
  }

function MM_callJS(jsStr) { //v2.0
  return eval(jsStr)
}
//-->
</script>
</head>
<body onload="toggle_visibility('left');">



<form name=toggle>
  <p>
    <input name=myradio type="radio" onclick="toggle_visibility('left')"value="left" checked="checked">
  left
  </p>
  <p>
    <input name=myradio type="radio" onclick="toggle_visibility('right')"value="right">
    right </p>
</form>


 <div id="left" >
    This is the content for the left side
 </div>

 <div id="right" >
    This is the content for the ride side
	</div>