Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript show hide divs onchange select menu

    Trying to get the divs to switch style properties when selected form select menu. Any help would be great!

    Code:
    <script type="text/javascript">
    function showstuff(element){
            if(document.getElementById(element).style.display = 'block')
                      {
                            document.getElementById(have).style.visibility="block";
                            document.getElementById(look).style.visibility="none";
                      }
            else if(document.getElementById(element).style.visibility = 'block')
                      {
                            document.getElementById(look).style.visibility="block";
                            document.getElementById(have).style.visibility="none";
                      }
    }
    </script>
    
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have">Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,700
    Thanks
    80
    Thanked 4,658 Times in 4,620 Posts
    Too complex.
    Code:
    <script type="text/javascript">
    function showstuff(element){
        document.getElementById("have").style.visibility = element=="have"?"block":"none";
        document.getElementById("look").style.visibility = element=="look"?"block":"none";
    }
    </script>
    
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have" selected>Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>
    Note that you were missing the "..." around "look" and "have" in document.getElementById.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    low tech (03-18-2011)

  • #3
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey thanks for getting back to me. That still doesn't quite work, it just hides one div but doesnt open another.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    Hi

    change both 'visibility' to 'display'

    eg
    document.getElementById("have").style.visibility

    document.getElementById("have").style.display

    LT

  • #5
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi Low Tech,

    Yeh i spotted that the first time, but still have the same issue.

    Any advice would be great.

    Thanks

  • #6
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    Hi

    No idea --- it works fine for me in IE8 and FireFox

    this is what I Have


    PHP Code:
    <!doctype html>
    <
    html>
    <
    head>
    <
    title>TEST TEMPLATE</title>
    </
    head>
    <
    body>
    <
    script type="text/javascript">
    function 
    showstuff(element){
        
    document.getElementById("have").style.display element=="have"?"block":"none";
        
    document.getElementById("look").style.display element=="look"?"block":"none";
    }
    </script>
    <select name="type" onchange="showstuff(this.value);">
              <option value="look">Look</option>
              <option value="have" selected>Have</option>
    </select>
    <div id="have" style="display:block;">Have</div>
    <div id="look" style="display:none;">Look</div>
    </body>
    </html> 
    LT

  • #7
    New to the CF scene
    Join Date
    Mar 2011
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    works great thanks low tech.

  • #8
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    891
    Thanks
    174
    Thanked 102 Times in 102 Posts
    Hi

    Glad it's working for you:-)

    Actually it's Old Pedant's code and thanks should be credited to him which i've done via the 'thank user for this helpful post' button.

    LT


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •