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 5 of 5
  1. #1
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    show/hide text or div

    I have this code that show/hide a div:

    <html>
    <head>
    <script type="text/javascript">
    function showHide()
    {
    if(document.getElementById('Checkbox1').checked)
    {
    document.getElementById('Text1').style.visibility = 'hidden';
    }
    else
    {
    document.getElementById('Text1').style.visibility = 'visible';
    }
    }
    </script>

    </head>
    <body>

    <input id="Checkbox1" type="checkbox" onclick="showHide();" /> Show/Hide

    <div id="Text1">
    Textul meu...
    </div>

    </body>
    </html>

    If a have 10 DIVs (every div with a checkbox) how can i hide divs withought writing 10 times the function, one function for every ID? How can i pass to the function the id of the div that i check? (or other idea)

    thanks.

  • #2
    Regular Coder
    Join Date
    Jun 2008
    Posts
    102
    Thanks
    6
    Thanked 9 Times in 9 Posts
    this should do the trick.
    call the showHide function from an onclick event and pass in the element that you want to show/hide as a parameter.


    Code:
    <html>
    <head>
    <script type="text/javascript">
    function showHide(element)
    {
      if(element)
      {
        if(this.checked)
        {
            element.style.visibility = 'hidden';
        }
        else
        {
            element.style.visibility = 'visible';
        }
      }
      else
      {
        //handle no element passed in if you want to here
      }
    }
    </script>
    
    </head>
    <body>
    
    <input id="Checkbox1" type="checkbox" onclick="showHide(document.getElementById('Text1'));" /> Show/Hide Text1
    <input id="Checkbox2" type="checkbox" onclick="showHide(document.getElementById('Text2'));" /> Show/Hide Text2
    
    <div id="Text1">
    Textul meu...
    </div>
    <div id="Text2">
    Textul meu...(number 2)
    </div>
    
    </body>
    </html>

  • #3
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    [QUOTE=hotwheelharry;796531]this should do the trick.
    call the showHide function from an onclick event and pass in the element that you want to show/hide as a parameter.

    this should do the trick but... it doesn't work ... please try it

  • #4
    New to the CF scene
    Join Date
    Mar 2009
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts
    problem solved.. thanks

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,650
    Thanks
    80
    Thanked 4,636 Times in 4,598 Posts
    Variations on that theme, to keep it simpler:
    Code:
    <script type="text/javascript">
    function showHide(cb)
    {
        var dv = document.getElementById("Text" + cb.name.substring(2) );
        if ( dv ) dv.style.display = ( cb.checked ? "block" : "none" );
    }
    </script>
    
    ....
    
    <input name="CB1" type="checkbox" onclick="showHide(this);" > Show/Hide Text1
    <input name="CB2" type="checkbox" onclick="showHide(this);" > Show/Hide Text2
    
    ....
    
    <div id="Text1" style="display: none;">.. whatever...</div>
    <div id="Text2" style="display: none;">...stuff ...</div>
    Using display:none is better in many cases than visiblity:hidden, because even hidden elements use up "space" on the screen.


  •  

    Posting Permissions

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