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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Toggle Div Visibility via Linked Image



    I have that image at the top of my website. What I want to do is have it be a link that toggles a div somewhere else on the board.

    I have been using this code:
    Code:
    <input type="checkbox" name="thebox" onclick="javascript:toggleDiv('block');">Toggle Block
    <div id="searchbock">*search form here, obviously*</div>
    
    <script language="javascript">
    function toggleDiv(id)
    {
       var div = document.getElementById(id);
       var current = div.style.display;
       
       if (current == 'none')
          div.style.display = 'block';
       else
          div.style.display = 'none';
    }
    </script>
    But the checkbox is rather ugly and I would much rather use my custom image. Thoughts?

  • #2
    Regular Coder
    Join Date
    Aug 2010
    Posts
    945
    Thanks
    19
    Thanked 205 Times in 203 Posts
    Code:
    <div id="searchbock">*search form here, obviously*</div>
    <img onclick="toggleDiv('searchbock')" src="http://z4.ifrm.com/30081/169/0/f5253495/headermenu_02.gif">
    <script language="javascript">
    function toggleDiv(id)
    {
       var div = document.getElementById(id);
       var current = div.style.display;
       
       if (current == 'none')
          div.style.display = 'block';
       else
          div.style.display = 'none';
    }
    </script>

  • #3
    New Coder
    Join Date
    Mar 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's pretty much exactly what I wanted with the small exception being that in my previous code, the div block was initially hidden and clicking showed it, while with this code the process is reversed. Can that be fixed?

  • #4
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by DaveyErwin View Post
    Code:
       var current = div.style.display;
    You can't use the style property to "read" style values from the stylesheet. The style property only assigns an inline style. On the first click, nothing happens as expected. After the inline style has been assigned then you can "read" the inline style value if you needed to.

    To get around that, I would do something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
            <title></title>
            <style type="text/css">
                #searchbock {display: none;}
            </style>
        </head>
        <body>
            <div id="searchbock">*search form here, obviously*</div>
            <img onclick="toggleDiv()" src="num1.jpg" id="img1" />
            <script type="text/javascript">
                var showHideDivO = document.getElementById('searchbock');
                var status = getDisplayStatus(showHideDivO);
                function toggleDiv(){
                    status = (status == 'none')? 'block':'none';
                    showHideDivO.style.display = status;
                }
                function getDisplayStatus(elem){
                    try{
                        var status = getComputedStyle(elem, '').getPropertyValue('display');
                    } catch(e){
                        var status = elem.currentStyle.display;
                    }
                    return status
                }
            </script>
        </body>
    </html>
    Last edited by webdev1958; 03-16-2012 at 01:28 AM.

  • #5
    New Coder
    Join Date
    Mar 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That worked perfectly. Thank you so much.

  • #6
    New Coder
    Join Date
    Mar 2010
    Posts
    10
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hi fellas,

    Sorry to bother you again, but is there a way to make it so that the content inside the toggle div does not load until it is triggered to show? Some of my members are complaining that the new additions are slowing down their browsing speed, and I assume it is because it is loading the content on every page refresh rather than only when the show trigger is clicked.

  • #7
    Banned
    Join Date
    Apr 2011
    Posts
    656
    Thanks
    14
    Thanked 69 Times in 69 Posts
    Quote Originally Posted by JohnSlider View Post
    but is there a way to make it so that the content inside the toggle div does not load until it is triggered to show?
    Post the code inside the toggle <div>


  •  

    Posting Permissions

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