button click

[davy_yg]

index.php

    <script type="text/javascript">
        $(document).ready(function() {
            $("#login").click(function() {
                $(".login_box").slideToggle('fast');
            });
        }); 
    </script>

    <div class="login_box" onblur="myFunction()"><br>
                        Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                        <input type="text" name="judul" size="20"><br><br>
                        Password:<br>
                        <input type="password" name="judul" size="20"><br>
                        <a href="#">Forget Password</a><br><br>
                        <button type="button" class="button">Sign-in</button>
                        <button type="button" class="button" onClick="window.location.href = 'http:\index-1.html';">Create Account</button><br>
                    </div>

This program when someone click the button the login_box appears and if one re-click the button the login_box disappears.

My intention is I would like if someone click the button the login_box appears and if one click any where in the screen the login_box disappears.

How to create program like that. I think I am using jquery.

Thanks in advance.

[tapananand]

Give id loginboxdiv to the loginbox div.
in myFunction the code should be:
document.getElementById('loginboxdiv').style.display='none';

[davy_yg]

You mean like this:

<script type="text/javascript">
$(document).ready(MyFunction() {
   $("#login").click(function() {
     $document.getElementById('loginboxdiv').style.display='none';
   });
});
</script>

[tapananand]

No.
First of all where is #login, I don't see it anywhere. No element seems to have id as login.
So you better give it to the button which when clicked slides the login form.
Secondly what I meant is this:

    <script type="text/javascript">
        function myFunction()
        {
            document.getElementById('loginboxdiv').style.display='none';
        }
    </script>

and your HTML should be:

 <div class="login_box" id="loginboxdiv" onblur="myFunction()"><br>
Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
<input type="text" name="judul" size="20"><br><br>
Password:<br>
<input type="password" name="judul" size="20"><br>
<a href="#">Forget Password</a><br><br>
<button type="button" class="button" id="login">Sign-in</button>
<button type="button" class="button" onClick="window.location.href = 'http:\index-1.html';">Create Account</button><br>
</div>

[davy_yg]

I try this and when I click my mouse on free space on the screen the login box does not disappears yet as I expected. how to make it works?

index.php

<script type="text/javascript">
        $(document).ready(function() {
            $("#login").click(function() {
                $(".login_box").slideToggle('fast');
            });
        }); 
    </script>  
    <script type="text/javascript">
        function myFunction()
        {
        document.getElementById('.login_box').style.display='none';
        }
    </script>

                <div id="wrapper1">
                    <div class="language">
                    <b><a href="#">English</a> &nbsp;|&nbsp; <a href="#">Indonesia</a></b><br><br><br>
                    </div>
                    <div class="login_box" onblur="myFunction()"><br>
                        Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br>
                        <input type="text" name="judul" size="20"><br><br>
                        Password:<br>
                        <input type="password" name="judul" size="20"><br>
                        <a href="#">Forget Password</a><br><br>
                        <button type="button" class="button">Sign-in</button>
                        <button type="button" class="button" onClick="window.location.href = 'http:\index-1.html';">Create Account</button><br>
                    </div>
                    <div class="nav"><!--class="btn"-->
                        <div class="button" id="login">Sign In</div>
                    </div>  
                    <br><br>      
            </div>