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: the framework

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

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


  1. jQuery is implemented as seen here jQuery, check
  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 script here
  • I know links are not a correct way to comment, but taking a look here maybe helping you to get another idea? – Charles Aug 13 '15 at 14:54

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" );
  • Thank God! It's working! Or rather.. Thank YOU! It was weird as I knew the code was working by trying it out a couple different ways, but apparently JS-Code with HTML and jQuery with WordPress is not equal. Once again, thanks a lot! – theHubi Aug 14 '15 at 8:02
  • @theHubi I'm glad to hear that. Generally, take a look at the browser's Console when something like JavaScript related doesn't seem to work as expected. – webtoure Aug 14 '15 at 11:45
  • Well there is a plugin which constantly gives a warning via console, but as it works, I ignore it. I thought the warning was to be attributed to said plugin as well, not my code. – theHubi Aug 17 '15 at 7:22

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:

    display: none;

    display: block;

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

  • I've tried with both. I added "log_forms" as a class to the div as well. – theHubi Aug 14 '15 at 7:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.