jQuery Show/Hide non-children elements?

Question

I tried to make this span button toggle hide / show an element it is not a parent of. Is it possible or does it have to be a parent of the element it is trying to toggle .show()/.hide() ?

HTML:

<div id="log_reg">
    <span class="btn" id="Log">Log In</span>
    <span class="btn" id="Reg">Register</span>
</div>
<div id="log_box">
    <table>
        <form name="login" action="logsys.php" method="post">
            <tr>
                <td>Username:</td>
                <td><input type="text" name="user" /></td>
            </tr>
            <tr>
                <td>Password:</td>
                <td><input type="password" name="pass" /></td>
            </tr>
            <tr>
                <td></td>
                <td><input type="submit" value="Log In" /></td>
            </tr>
        </form>
    </table>
</div>

jQuery:

$(document).ready(function(){
    $("#log_box").hide();
    $("log").click(function(){
        $("#log_box").show();
    });
});

Answer 1

Your selector is incorrect. Its Log and You missed #

Use

$("#Log").click(function () {
    $("#log_box").show();
});