I'm doing User Login and after doing I want the first form to be hidden and only the other field to be visible. Since I was browsing at first, it always sees it as display:block, how can I avoid this? Can anyone help with this?

So in short, how can I hide my login panel after logging in?

Thank you advance.

$(document).ready(function(){
$(".login-user").click(function () {
   $("#container").append('<div >User Login Success</div>');
});

  $('#btn , .login, myAccount').mouseover(function(){ 
  if (jQuery('div').hasClass('appendme')){
  $('.login').css('display','none');
  $('.myAccount').css('display','block');
  }
    $('.login').show();
  }).mouseout(function(){     
    $('.login').hide();
  });    

});

.login, .myAccount{
  width:300px;
  height:auto;
  border:1px solid #CCC;
  display:none;
}
#btn{
  width:300px;
}
.appendme{
display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="btn">
    My Account
  </button>
  <div class="login"> 
    Login Panel
    <button class="login-user">Login</button>
  </div>
  <div class="myAccount"> 
    <ul>
    <li>My account Edit</li>
    <li>My Wishlist</li>
    <li>My Orders</li>
    </ul>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

You could use $('.login').remove();, but you should check how and when a user is logged in, and not make it dependable on a simply click event.

$(document).ready(function(){
$(".login-user").click(function () {
   $("#container").append('<div >User Login Success</div>');
   $('.login').remove();
});

  $('#btn , .login, myAccount').mouseover(function(){ 
  if (jQuery('div').hasClass('appendme')){
  $('.login').css('display','none');
  $('.myAccount').css('display','block');
  }
    $('.login').show();
  }).mouseout(function(){     
    $('.login').hide();
  });    

});

.login, .myAccount{
  width:300px;
  height:auto;
  border:1px solid #CCC;
  display:none;
}
#btn{
  width:300px;
}
.appendme{
display:none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="btn">
    My Account
  </button>
  <div class="login"> 
    Login Panel
    <button class="login-user">Login</button>
  </div>
  <div class="myAccount"> 
    <ul>
    <li>My account Edit</li>
    <li>My Wishlist</li>
    <li>My Orders</li>
    </ul>
  </div>
</div>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>