将单个div的类与单个类分别切换

Question

I have 3 divs that onlick display the next div. I also need the onclick to toggleClass of selected div, the issue is that if another of the divs with the same class is clicked the toggleclass remains on the other div that was selected previously.

I have tried toggleClass but it does not remove from previously selected divs. One more addition: I would like if Pay with Other is selected the text of the href is changed from "Submit Payment" to "Continue" and change back when the other divs are selected.

 $(document).ready(function() { $('.payment').on('click', function() { var $paymentoptions = $(this).next('.paymentoptions'); $paymentoptions.slideToggle(); $('.paymentoptions').not($paymentoptions).slideUp(); $(this).toggleClass('active'); }); $(".addbilld").click(function() { $('#submit').html('Continue'); }); }); 

 .paymentoptions { display: none } .payment.active { background: #dedede } 

 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <div class="form"> <h3>Payment Options</h3> <div class="payment"><span></span>ACH Payment</div> <div class="paymentoptions"> <div> <div> <label>Bank Name</label> <input type="text" disabled value="Bank of America" /> </div> <div> <label>Account Number</label> <input type="text" disabled value="*****6372" /> </div> <a href="#" id="submit">+ add account</a> </div> </div> <div class="payment"><span></span>Credit Card <span class="cc"></span></div> <div class="paymentoptions"> <div> <div> <label>Credit Card</label> <input type="text" disabled value="MasterCard" /> </div> <div> <label>Credit Card Number</label> <input type="text" disabled value="**** **** **** 7271" /> </div> <a href="#">+ add credit card</a> </div> </div> <div class="payment" id="addbilld"><span></span>Pay with Other </div> </div> <a href="#" class="link" id="submit">Submit Payment</a> 

Answer 1

Change

$(this).toggleClass('active');

to

$('.payment').not(this).removeClass('active');
$(this).toggleClass('active');

this only points to the element the event is being processed on