jquery click add class and toggle div

Question

When I click twice active class toggle keeps continue is there a way stop when clicked twice or is there a better approach?

 $(document).on('click', '#btnsbs .btn', function(e) { $(this).addClass('active').siblings().removeClass('active'); $(".form").toggle(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="btnsbs"> <button class="btn btn-buy active">Buy</button> <button class="btn btn-sell">Sell</button> </div> <div class="form" style="display:block;"> form buy </div> <div class="form" style="display:none;"> form sell </div> 

Answer 1

You could use some if-else statements like this:

 $(document).on('click', '#btnsbs .btn', function(e) { var $this = $(this); //Just check the button being clicked for the class you cara about using hasClass if ($this.hasClass('btn-buy')){ //Then set the text of your form element $(".form").text("Form Buy"); console.log("SELL"); } else if ($this.hasClass('btn-sell')){ $(".form").text("Form Sell"); console.log("BUY"); }; }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="btnsbs"> <button class="btn btn-buy">Buy</button> <button class="btn btn-sell">Sell</button> </div> <div class="form" style="display:block;"> </div> 

Answer 2

How about doing utilizing the disabled attribute, this will disable the button and prevent user from clicking on the same button twice.

 $(document).ready(function(){ $(document).on('click', '#btnsbs .btn.active', function(e) { $(this).addClass('active').siblings().removeClass('active');//remove default active class $(".form").toggle(); }); $(document).on('click', '#btnsbs .btn', function(e) { $('.btn.active').removeAttr('disabled');//reset all disabled buttons $(this).addClass('active').siblings().removeClass('active'); $(this).attr('disabled','disabled');//disable button upon click $(".form").toggle(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="btnsbs"> <button class="btn btn-buy active" disabled>Buy</button> <button class="btn btn-sell">Sell</button> </div> <div class="form" style="display:block;"> form buy </div> <div class="form" style="display:none;"> form sell </div> 

Answer 3

Here is one simple way to do that, just hide form class onclick, and show class mentioned in data attribute :

Explanation:

• $('.form').hide(); will hide all form with class form
• $('.' + $(this).attr('data') ).show(); will show form with class, you mentioned in data attribute of your button
• $(this).attr('disabled',true).siblings().attr('disabled',false); - prevents clicking of twice

Example :

 $('#btnsbs .btn').on('click', function(e) { $('.form').hide(); $('.' + $(this).attr('data') ).show(); $(this).attr('disabled',true).siblings().attr('disabled',false); console.log( $(this).attr('data') ); }); 

 .form {display:none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div id="btnsbs"> <button class="btn" data="form-buy" >Buy</button> <button class="btn" data="form-sell" >Sell</button> </div> <div class="form form-buy" > form buy </div> <div class="form form-sell" > form sell </div>