In general, there are 6 blocks, when you click on a block, it should turn blue, here is my script

$(document).ready(function(){ $(".price__list__wrapper").each(function(){ $(this).click(function(){ if ($(this).hasClass('non-active')) { $(this).css('backgroundColor','#467EEE').removeClass('non-active'); }else{ $(this).css('backgroundColor','#fff').addClass('non-active'); } }); }) });

It works fine, but you need to make sure that when you click on another block, the color of the current selected is removed, and they are highlighted in turn, and when you click again, the color is removed. It is necessary to work like a radio to eat while 1 is active the rest.

    1 answer 1

    Add active color to active class.

     $(document).ready(function() { $(".price__list__wrapper").click(function() { $(".active").not(this).removeClass('active'); $(this).toggleClass('active'); }); }); 
     .price__list__wrapper { width:200px; height:50px; border-color:black; border-style:solid; border-width:1px; background-color: #DDD; } .active { background-color: #467EEE; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="price__list__wrapper"></div> <div class="price__list__wrapper"></div> <div class="price__list__wrapper"></div> <div class="price__list__wrapper"></div>

    • so easy)) thanks)) as I did not catch up ... - vovaxxx