Question 203987 in Html Question posted in
Some basic documentation can be found here.

Html – Hide DIV when text is clicked

I have two div classes, one for login and one for signup. Now, for the login div, there’s underlined text which asks to Sign Up, and for the signup div, there’s underlined text which asks to Log In. When these texts are clicked, the respective div should have no display and the other div should be displayed.

HTML:

<div class="login">
        <h2 class="textHead">MedConnect</h2>
        <h2 class="logintxt">Log In to Your Account</h2>
        <input type="text" class="loginemailtxt" name="email" placeholder="Email Address">
        <input type="password" class="loginpwdtxt" name="password" placeholder="Password">
        <button class="loginbtn" type="button" name="button">Log In</button>
        <h5 id="signuptext" style="margin-top: 50px; text-align: center;">Don't have an Account? <u style="cursor: pointer;">Sign Up</u></h5>
        <h6 style="text-align: center;">By clicking "Log In", you log back into your Existing Account</h6>
        <div id="errorMsg">
          <h5 id="loginNoEmail">Please enter your email address</h5>
          <h5 id="loginNoPassword">Please enter your password</h5>
          <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
        </div>
      </div>

      <div class="signup" style="display: none">
        <h2 class="textHead">MedConnect</h2>
        <h2 class="logintxt">Create a New Account</h2>
        <input type="text" class="signupnametxt" name="Name" placeholder="Name">
        <input type="text" class="signupemailtxt" name="Email" placeholder="Email Address">
        <input type="password" class="signuppwdtxt" name="Password" placeholder="Create Password">
        <button class="signupbtn" type="button" name="Button">Sign Up</button>
        <h5 id="logintext" style="margin-top: 50px; text-align: center;">Already a Member? <u style="cursor: pointer;">Log In</u></h5>
        <h6 style="margin-top: 5px; text-align: center;">By clicking "Sign Up", you agree to our <u style="cursor: pointer;">Terms</u> and <u style="cursor: pointer;">Privacy Policy</u></h6>
        <div id="errorMsg">
          <h5 id="loginNoEmail">Please enter your email address</h5>
          <h5 id="loginNoPassword">Please enter your password</h5>
          <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
        </div>
      </div>

JavaScript (creating a variable for each element required):

<script type="text/javascript">

var signuptxt = document.getElementById('signuptext');
var logintxt = document.getElementById('logintext');
var loginDiv = document.getElementsByClassName('login');
var signUpDiv = document.getElementsByClassName('signup');

</script>
Tags:

2

Answers


  1. 0

    According to me, you are asking a functionality like this:
    Signup Button => clicked => display signup div and hide the login div and when
    Login Button => clicked => display login div and hide the signuo div.
    If this is the case, then this should work:

    <script type="text/javascript">

var signuptxt = document.getElementById('signuptext');
var logintxt = document.getElementById('logintext');
var loginDiv = document.getElementsByClassName('login');
var signUpDiv = document.getElementsByClassName('signup');

signuptxt.addEventListener("click", function() {
 if (!signUpDiv.style.display || signUpDiv.style.display === 'none') { // Check whether it is in display, if not then run the conditional block
  signupDiv.style.display = 'block';
  loginDiv.style.display = 'none';
}

logintxt.addEventListener("click", function() {
 if (!loginDiv.style.display || loginDiv.style.display === 'none') {
  loginDiv.style.display = 'block';
  signupDiv.style.display = 'none';
}

</script>
    Login or Signup to reply.
  2. 0 
    <html>

<head>
  <script type="text/javascript">

    function showorHide(showDivName, hideDivName) {
      var showDiv = document.getElementsByClassName(showDivName);
      var hideDiv = document.getElementsByClassName(hideDivName);
      hideDiv[0].style.display = 'none'
      showDiv[0].style.display = 'block'
    }
  </script>
</head>

<body>
  <div class="login" style="display: block">
    <h2 class="textHead">MedConnect</h2>
    <h2 class="logintxt">Log In to Your Account</h2>
    <input type="text" class="loginemailtxt" name="email" placeholder="Email Address">
    <input type="password" class="loginpwdtxt" name="password" placeholder="Password">
    <button class="loginbtn" type="button" name="button">Log In</button>
    <h5 id="signuptext" style="margin-top: 50px; text-align: center;">Don't have an Account? <u
        onclick="showorHide('signup','login')" style="cursor: pointer;">Sign Up</u></h5>
    <h6 style="text-align: center;">By clicking "Log In", you log back into your Existing Account</h6>
    <div id="errorMsg">
      <h5 id="loginNoEmail">Please enter your email address</h5>
      <h5 id="loginNoPassword">Please enter your password</h5>
      <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
    </div>
  </div>

  <div class="signup" style="display: none">
    <h2 class="textHead">MedConnect</h2>
    <h2 class="logintxt">Create a New Account</h2>
    <input type="text" class="signupnametxt" name="Name" placeholder="Name">
    <input type="text" class="signupemailtxt" name="Email" placeholder="Email Address">
    <input type="password" class="signuppwdtxt" name="Password" placeholder="Create Password">
    <button class="signupbtn" type="button" name="Button">Sign Up</button>
    <h5 id="logintext" style="margin-top: 50px; text-align: center;">Already a Member? <u
        onclick="showorHide('login','signup')" style="cursor: pointer;">Log In</u></h5>
    <h6 style="margin-top: 5px; text-align: center;">By clicking "Sign Up", you agree to our <u
        style="cursor: pointer;">Terms</u> and <u style="cursor: pointer;">Privacy Policy</u></h6>
    <div id="errorMsg">
      <h5 id="loginNoEmail">Please enter your email address</h5>
      <h5 id="loginNoPassword">Please enter your password</h5>
      <h5 id="loginIncorrectCreds">Incorrect Email or Password</h5>
    </div>
  </div>
</body>

</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search