Show/Hide Div for Login Mask

Question

I've been trying around a lot to get this working, however every method I tried just didn't want to do as I wanted it to. So here I am.

I have a login-Mask that's only visible if the user is not logged in but it's permanently visible and covers some important areas. So here's my idea: hide it via toggle.

I know it's gonna take HTML, CSS and Javascript, so let's do this.

Here's a visual representation of where I'm at:

Now I want the Login-Widget to only show AFTER you click the "Login" text up top.

1. Div is hidden by default - CSS: display:none;
2. Text is <a>-Element with href="#"

So if you click the Text "Login", the Login-Mask appears and if you click it again, it disappears. Just normal toggle.

I guess the best idea is to use div.toggleClass("open") or something similar.

Any help is appreciated!

edit01: Here's my idea: functions.php

<script>
$( "a.toggle").click(function() {
    $("div.log_forms").toggleClass( "open" );
});
</script>

edit02:

1. jQuery is implemented as seen here
2. The site is loading JavaScript as seen in the other lines in the head-section
3. The code is correct as I've had it work on another site before (tried both # and .)
4. Heck, the script even gets loaded, as seen here

Answer 1

You are calling jQuery wrong by the shorthand $. If you will look in your console you will see an error that $ is not a function / undeclared etc (this is due to jQuery's conflict mode if I am not wrong).

Your code should look something like this:

<script type="text/javascript">
jQuery(function($) {
    $( "a.toggle").click(function() {
        $("#log_forms").toggleClass( "open" );
    });
});
</script>

Answer 2

I think you are pretty much there. In your JavaScript you are referencing log_forms as a class, but in your HTML it looks like log_forms is an ID. So you would need:

$( "a.toggle").click(function() {
    $("#log_forms").toggleClass( "open" );
});

Then the css would be:

#log_forms{
    display: none;
}

#log_forms.open{
    display: block;
}

Example: http://jsfiddle.net/diywordpress/nsdbvc4h/9/