jquery only allow one div element to be selected at a time on click

Question

I have styled some markup where the user can select a DIV and it shows highlighted.. this works fine, however, I want to only allow one DIV to be highlighted and selected at time.. currently the user can select all 3 DIVS and they will all show highlighted. I use jquery toggleClass to add/remove "active" class to DIV. "active" class is styled in css to show blue background.

how can I stop users from selecting all 3?

 $('.pricecard.aircraft').click(function() { // this will fire when you click view $(this).toggleClass('active'); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft active h-100"> <div class="card-body"> <span class="price1">£20,944</span></p> </div> </div> </div> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price2">£20,944</span></p> </div> </div> </div> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price3">£20,944</span></p> </div> </div> </div>

Answer 1

To achieve your goal call removeClass() on all the other .pricecard.aircraft elements which are not the one which was clicked on:

 let $divs = $('.pricecard.aircraft').click(function() { $divs.not(this).removeClass('active'); $(this).toggleClass('active'); });

 .active { color: #C00; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft active h-100"> <div class="card-body"> <span class="price1">£20,944</span> </div> </div> </div> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price2">£20,944</span> </div> </div> </div> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price3">£20,944</span> </div> </div> </div>

Answer 2

Just using HTML and CSS, no JavaScript is needed.

 [name="price"]:checked + label > div { background-color: yellow; }

 <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" /> <input type="radio" name="price" id="price1" value="20944" class="d-none"/> <label class="col-sm-4 my-1 d-inline-block" for="price1"> <div class="card pricecard aircraft active h-100"> <div class="card-body"> <span class="price1">£20,944</span></p> </div> </div> </label> <input type="radio" name="price" id="price2" value="20944" class="d-none"/> <label class="col-sm-4 my-1 d-inline-block" for="price2"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price2">£20,944</span></p> </div> </div> </label> <input type="radio" name="price" id="price3" value="20944" class="d-none"/> <label class="col-sm-4 my-1 d-inline-block" for="price3"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price3">£20,944</span></p> </div> </div> </label>

Answer 3

You can use:

 $('.pricecard.aircraft').click(function() { $('.pricecard.aircraft').removeClass('active'); $(this).addClass('active'); })

 .pricecard.aircraft.active { background-color: yellow }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft active h-100"> <div class="card-body"> <span class="price1">£20,944</span></p> </div> </div> </div> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price2">£20,944</span></p> </div> </div> </div> <div class="col-sm-4 my-1"> <div class="card pricecard aircraft h-100"> <div class="card-body"> <span class="price3">£20,944</span></p> </div> </div> </div>

This works!