Results 1 to 3 of 3

Thread: Toggle Show Hide Div - Problem

  1. #1
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default Toggle Show Hide Div - Problem

    Hello,

    I'm using this script to toggle between div's from a drop down select action. Is there a way I can expand this script to allow me to toggle with other divs?

    Script:
    Code:
    <script type='text/javascript'>
    function toggleSubmit(obj){
    
    count=0
    while(document.getElementById("d"+count)){
    document.getElementById("d"+count).style.display="none"
    count++
    }
    document.getElementById("d"+obj.selectedIndex).style.display="block"
    
    }
    </script>
    HTML:
    Code:
    <form>
      <select onChange="toggleSubmit(this)">
        <option>AAA</option>
        <option>BBB</option>
      </select>
    </form>
    
    <div id="d0" style="display:block">
      AAA
    </div>
    
    <div id="d1" style="display:none">
      BBB
    </div>
    I tried adding div's with id's of d2 and d3, but no luck...

    Thank you for the help.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,891
    Thanks
    2
    Thanked 441 Times in 435 Posts

    Default

    no sure I understand but

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script type='text/javascript'>
    
    function toggleSubmit(nme,obj){
     var count=0
     while(document.getElementById(nme+count)){
      document.getElementById(nme+count).style.display=obj.selectedIndex!=count?"none":"block"
      count++
     }
    }
    
    </script>
    </head>
    
    <body>
    <form>
      <select onChange="toggleSubmit('d',this)">
        <option>AAA</option>
        <option>BBB</option>
        <option>CCC</option>
        <option>DDD</option>
      </select>
      <select onChange="toggleSubmit('e',this)">
        <option>EEE</option>
        <option>FFF</option>
        <option>GGG</option>
        <option>HHH</option>
      </select>
    </form>
    
    <div id="d0" style="display:block">
      AAA
    </div>
    
    <div id="d1" style="display:none">
      BBB
    </div>
    <div id="d2" style="display:none">
      CCC
    </div>
    
    <div id="d3" style="display:none">
      DDD
    </div>
    
    <div id="e0" style="display:block">
      EEE
    </div>
    
    <div id="e1" style="display:none">
      FFF
    </div>
    <div id="e2" style="display:none">
      GGG
    </div>
    
    <div id="e3" style="display:none">
      HHH
    </div>
    </body>
    
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Sep 2008
    Posts
    48
    Thanks
    0
    Thanked 4 Times in 4 Posts

    Default

    Than you very much!

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
  •