CODEWITHSUNDEEP
jquery
Osh
Osh

Reputation: 75

How to toggle Between two elements

I'm trying to toggle visibility between two sections with one button.

I have two sections one for signin and one for register. I want the user to have the ability to switch between those sections

the initial click event works, but I couldn't figure out how to flip the click event to swap on the next click. 

<div class="container">
  <button id="btn">Click</button>
  <section id="register" class="active"></section>
  <section id="signup" class="hide"></section>
</div>

  let btn = $('#btn')
  let login = $('#login');
  let register = $('#register');

  btn.on('click',(e)=>{
   e.preventDefault(); 
   register.removeClass('active').addClass('hide');
   login.removeClass('hide').addClass('active');

  })

Upvotes: 1

Views: 185

Answers (1)

T.J. Crowder
T.J. Crowder

Reputation: 1074555

Just use toggleClass:

btn.on('click',(e)=>{
    e.preventDefault(); 
    register.toggleClass('active hide');
    login.toggleClass('active hide');
});

Provided one of them has active and the other has hide when you start, that will toggle between them.

Unless you're using login and register elsewhere in your code, you could combine them.

let btn = $('#btn')
let panels = $('#login, #register');
btn.on('click',(e)=>{
    e.preventDefault(); 
    panels.toggleClass('active hide');
});

Live Example :

let btn = $('#btn')
let panels = $('#login, #register');
btn.on('click',(e)=>{
    e.preventDefault(); 
    panels.toggleClass('active hide');
});
.hide {
    display: none;
}
<div class="container">
  <button id="btn">Click</button>
  <section id="register" class="active">register</section>
  <section id="login" class="hide">login</section>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Note that unless you're using active for something else, you don't need it:

let btn = $('#btn')
let panels = $('#login, #register');
btn.on('click',(e)=>{
    e.preventDefault(); 
    panels.toggleClass('hide');
});
.hide {
    display: none;
}
<div class="container">
  <button id="btn">Click</button>
  <section id="register">register</section>
  <section id="login" class="hide">login</section>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Side note: Your HTML defines sections with the ids register and signup, but your code expects register and login. I've fixed that in the live examples above.

Upvotes: 1

Related Questions