SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Hybrid View

  1. #1
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    basic show/hide toggle script

    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:
    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. #2
    SitePoint Addict bronze trophy AllanP's Avatar
    Join Date
    Sep 2010
    Location
    Australia
    Posts
    298
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    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.

    Code:
    <p>Show Div 1:<input type="radio" name="tab" value="pkfrom" class="div1" checked /></p>

  3. #3
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    Mar 2014
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Solved it with this code, which is probably simpler:
    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>
     <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>


Tags for this Thread

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
  •