This is part of my HTML code

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

$('.message a').click(function(){
   $('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});

I was told not to use jquery at school. so I want to convert this jquery to javascript and use it What should i do?

CodePudding user response：

Do it yourself using the following steps:

1. Change the $()s to document.querySelector()s.
   for example:

$('.message a').click(function() {

should be

document.querySelector('.message a').onclick = function() {

2. Make a CSS animation for what animation() function did.

CodePudding user response：

You can use this code

document.querySelector('.message a').click(function(){
   document.querySelector('form').animate({height: "toggle", opacity: "toggle"}, "slow");
});