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 6 of 6
  1. #1
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post

    Show a hidden div by clicking anywhere on the page

    I got this script of the internet that toggles a hidden div on/off. I have converted this script into a drop down menu so the hidden div is the second level of the menu and is floating above the rest of the content. Can anyone please show me how to go about modifying the script so that the hidden div is hidden again when i click anywhere on the page other than the div itself instead of having to toggle it. Thanks. ps. hope this wasn't too confusing.

    HTML
    Code:
    <div id="mydiv"><a href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>
    <div id="mydiv2" class="hidden"> this hidden text will show when the link is pressed
    </div>
    CSS
    Code:
    .hidden { display: none; }
    .unhidden { display: block; }
    JAVASCRIPT
    Code:
    <script type="text/javascript">
    function unhide(divID) {
      var item = document.getElementById(divID);
      if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
      }
    }
    </script>
    Thanks

  • #2
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Add the onblur event of the div itself:
    <div id="mydiv" onblur='unhide("mydiv")'><a href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>

  • #3
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    Quote Originally Posted by ckeyrouz View Post
    Add the onblur event of the div itself:
    <div id="mydiv" onblur='unhide("mydiv")'><a href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>
    Hey,
    This didn't seem to work... Any other suggestions.
    Thanks.

  • #4
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    Sorry for that put the blur event on the anchor like this:
    <div id="mydiv"><a onblur='unhide("mydiv")' href="javascript:unhide('mydiv2');">Click here to show content</a>
    </div>

  • #5
    New Coder
    Join Date
    Apr 2008
    Posts
    10
    Thanks
    3
    Thanked 1 Time in 1 Post
    Thanks. Solved it now.

  • #6
    Senior Coder ckeyrouz's Avatar
    Join Date
    Jun 2009
    Location
    Montreal, Canada
    Posts
    1,044
    Thanks
    5
    Thanked 179 Times in 179 Posts
    If what I said helped solved your problem please thank me using the thank button.
    I apologize if I appear rude but I am trying to increase my credit in this forum.

    Thank you.

  • Users who have thanked ckeyrouz for this post:

    FeralUK (07-03-2009)


  •  

    Tags for this Thread

    Posting Permissions

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