CODEWITHSUNDEEP
javascripthtmlcssshow-hide
Patrick
Patrick

Reputation: 41

Show and hide divs when click button

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");
let btn2 = document.getElementById("btn-signup");
let div2 = document.getElementById("signMe");

btn.addEventListener("click", () => {
    if (div.style.display === "none") {
        div2.style.display = "block";
    } else {
        div.style.display = 'none';
    }
})
 <div id="loglog">
                <form id="wrap">
                <img class="userImage" src="user.png" alt="user">
                <input id="email" type="text" name="email" placeholder="E-mail">
                <input id="password" type="password" name="password" placeholder="Password">
                <button id="btn-login" type="button" onclick="login()">Login</button>
                <div id="warning-msg"></p>
                </form>
            </div>

            <div id="signMe">
                <form id="Create">
                <h2>Create Account</h2>
                <input id="firstName" type="text" placeholder="First Name">
                <input id="lastName" type="text" placeholder="Last Name">
                <input id="newEmail" type="text" placeholder="E-mail">
                <input id="newPassword" type="password" placeholder="Password">
                <button id="btn-signup" type="button" onclick="registerUser()">Sign Up</button>
                <div id="warning-msg">
                </form>
            </div>

Hi expert people, I wanna know how to show the div2(signup button) when I click the div1 (login button) note: the display of div2 in css is "none"; and the login() & registerUser() function is for localstorage not on this problem. thank you.

Upvotes: 0

Views: 2299

Answers (2)

A Haworth
A Haworth

Reputation: 36492

The JS toggle function is good for toggling classes on and off.

Here's a simple example

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");

btn.addEventListener("click", () => {
    div.classList.toggle('hide');
})
.hide {
  display: none;
}
<button id="btn-login">Unshow/show</button>
<div id="loglog">Stuff to unshow on button click and show on the next button click</div>

Upvotes: 4

Wael Zoaiter
Wael Zoaiter

Reputation: 716

You should use window.getComputedStyle() to access the style properly of the element.

The window.getComputedStyle() method returns an object containing the values of all CSS properties of an element, after applying active stylesheets and resolving any basic computation those values may contain. Individual CSS property values are accessed through APIs provided by the object, or by indexing with CSS property names.

let btn = document.getElementById("btn-login");
let div = document.getElementById("loglog");
let btn2 = document.getElementById("btn-signup");
let div2 = document.getElementById("signMe");

btn.addEventListener("click", () => {
console.log(div.style.display)
    if (window.getComputedStyle(div) === "none") {
        div2.style.display = "block";
    } else {
        div.style.display = 'none';
    }
});

You can read more about it from MDN

Upvotes: 1

Related Questions