How to make a div appear and disappear on click using querySelector and addEventListener-CodePudding

I got the divs that have the email and password from bootstrap. I have css for the id dropdownlogin, and I did display: none; this is my first post so I hope I have given enough information.


<script>
    document.addEventListener('DOMContentLoaded', function()
    {
        document.querySelector("#dropdownlogin").addEventListener('click', function()
        {
            dropdownlogin.style.display = block;
        })
    });
</script>

<div >
    <a href="#">Login</a>
    <center>
        <form id="dropdownlogin" action="">
            <div >
                <input type="email"  id="floatingInput" placeholder="[email protected]">
                <label for="floatingInput">Email address</label>
            </div>
            <div >
                <input type="password"  id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
            </div>
            <div id="loginbtn">
                <button>Login</button>
                <button>Forgot Password</button></p>
            </div>
        </form>
    </center>
</div>

CodePudding user response：

You can attach the event on the Login and on click of you can show or hide the form. Add a class to the form and on click of the link toggle the visibility of the form

const formContainer = document.getElementById('dropdownlogin');

function toggleForm(e) {
  formContainer.classList.toggle('hideForm');
}

.hideForm {
  display: none
}

<div >
  <a href="#" onClick="toggleForm()">Login</a>

  <form id="dropdownlogin"  action="">

    <div >
      <input type="email"  id="floatingInput" placeholder="[email protected]">
      <label for="floatingInput">Email address</label>
    </div>
    <div >
      <input type="password"  id="floatingPassword" placeholder="Password">
      <label for="floatingPassword">Password</label>
    </div>
    <div id="loginbtn">
      <button>Login</button>
      <button>Forgot Password</button>
    </div>
  </form>

</div>

CodePudding user response：

<script>
 var mydiv = document.querySelector("#dropdownlogin")
 var mybtn = document.querySelector("#mybtn")

 mybtn.addEventListener("click", function () 
    {
       mydiv.classList.toggle("hidden")
    });
</script>

.hidden{
display:none;
}

<div >
    <a href="#">Login</a>
    <center>
        <form id="dropdownlogin"  action="">
            <div >
                <input type="email"  id="floatingInput" placeholder="[email protected]">
                <label for="floatingInput">Email address</label>
            </div>
            <div >
                <input type="password"  id="floatingPassword" placeholder="Password">
                <label for="floatingPassword">Password</label>
            </div>
            <div id="loginbtn">
                <button>Login</button>
                <button>Forgot Password</button></p>
            </div>
        </form>
        <button id="mybtn">Click Me!</button>
    </center>
</div>