CODEWITHSUNDEEP
javascriptjqueryhtml
Téo ORIOL
Téo ORIOL

Reputation: 57

Jquery opacity toggle

I'm trying to get the div containing the login form to disappear when clicking the "Create an account" anchor then I would like to be able to reverse the process by clicking the "sign in" anchor on the registration form using Jquery.

I think I properly linked Jquery and the Js file in the head.

<head>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <script src="script/jquery-3.1.1.js"></script>
  <script src="script/javascript.js"></script>
</head>

Here's the new html

  <div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a href="" class="signin">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="" class="create">Create an account</a></p>
    </form>
  </div>

And here's the new javascript.js

$(document).ready(function(){
  $('a.signin').on("click", function(e) {
     e.preventDefault();
     $('.register-form').fadeOut();
     $('.login-form').fadeIn();
  });

  $('a.create').on("click", function(e) {
     e.preventDefault();
     $('.login-form').fadeOut();
     $('.register-form').fadeIn();
  });
)};

Clicking on the anchors does nothing by the way.

Any help would be greatly appreciated, thanks in advance !

Upvotes: 0

Views: 303

Answers (3)

Robert Ette
Robert Ette

Reputation: 1

Once you link you html to jquery and javascript correctly, the above code toggles as expected.

Add the code below to you css file to hide the Registration form on initial launch of the web page.

.register-form { display: none; }

Upvotes: 0

T&#233;o ORIOL
T&#233;o ORIOL

Reputation: 57

Okay, guess I forgot to use the $(document).ready(function), then made a syntax error at the very end of my javascript.js because I wrote )}; instead of });

Thanks a lot !

Upvotes: 0

user7236046
user7236046

Reputation:

Change your HTML to this (I've added a class to each anchor).

<div class="form">
    <form class="register-form">
      <input type="text" placeholder="name"/>
      <input type="password" placeholder="password"/>
      <input type="text" placeholder="email address"/>
      <button>create</button>
      <p class="message">Already registered? <a href="#" class="signin">Sign In</a></p>
    </form>
    <form class="login-form">
      <input type="text" placeholder="username"/>
      <input type="password" placeholder="password"/>
      <button>login</button>
      <p class="message">Not registered? <a href="#" class="create">Create an account</a></p>
    </form>
  </div>

Then replace your jQuery to this...

$('a.signin').on("click", function(e) {
   e.preventDefault();
   $('.register-form').fadeOut();
   $('.login-form').fadeIn();
});

$('a.create').on("click", function(e) {
   e.preventDefault();
   $('.login-form').fadeOut();
   $('.register-form').fadeIn();
});

Use the .on() function in jQuery. It's much better for events like on-click etc.

Upvotes: 1

Related Questions