Home show div onclick, add class to the div and get the similar process for the other divs

Questions

show div onclick, add class to the div and get the similar process for the other divs

January 31, 2022

I have a block of div i wanted to add .active class to the div .verified-account when clicking .title-box.has-value it should also add class to .screen-answer.

So if the next div is clicked, the previous clicked and active div needs to get his class removed (so deactive) and his row beneath hidden. The next selected div needs to get the same process as the previous.

<div class="screen-start">
<div class="screenbox">
<div class="btn-screen box-start">
<div class="title-box has-value blue-bg">YES</div>
<div class="verified-account"></div>
</div>
<div class="btn-screen box-start">
<div class="title-box has-value green-bg">AMAZING!!!</div>
<div class="verified-account"></div>
</div>
<div class="btn-screen box-start">
<div class="title-box has-value green-bg">MAYBE YES.</div>
<div class="verified-account"></div>
</div>
</div>
<div class="screen-answerbox">
<div class="screen-answer blue">This was a active
</div>
<div class="screen-answer green">This was a active
</div>
<div class="screen-answer green">This was a active
</div>
</div>
</div>

My Jquery code

jQuery(document).ready(function($) {

var selector = '.title-box.has-value';

$(selector).on('click', function(){
$(selector).closest('.btn-review').find('.icons8-verified-account').removeClass('active');
$(this).closest('.btn-review').find('.icons8-verified-account').addClass('active');
$(selector).parents('.rating-start').find('.range-answer').removeClass('active');
$(this).parents('.rating-start').find('.range-answer').addClass('active');
});
});

>Solution :

You can just use:

$('.verified-account').removeClass("active");
$(this).next('.verified-account').addClass("active");

The first line removed .active from all elements with the class verified-account;

The second line adds the class active to the verified-account element related to the click element.

Demo

jQuery(document).ready(function($) {

  var selector = '.title-box.has-value';

  $(selector).on('click', function() {
    var inx = $(selector).index(this);
    $(selector).closest('.btn-review').find('.icons8-verified-account').removeClass('active');
    $(this).closest('.btn-review').find('.icons8-verified-account').addClass('active');
    $(selector).parents('.rating-start').find('.range-answer').removeClass('active');
    $(this).parents('.rating-start').find('.range-answer').addClass('active');
    $('.verified-account').removeClass("active");
    $(this).next('.verified-account').addClass("active");
    $('.screen-answer').removeClass("active");
    $('.screen-answer').eq(inx).addClass("active")
  });
});

.active {
  color: yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="screen-start">
  <div class="screenbox">
    <div class="btn-screen box-start">
      <div class="title-box has-value blue-bg">YES</div>
      <div class="verified-account">Verify</div>
    </div>
    <div class="btn-screen box-start">
      <div class="title-box has-value green-bg">AMAZING!!!</div>
      <div class="verified-account">Verify</div>
    </div>
    <div class="btn-screen box-start">
      <div class="title-box has-value green-bg">MAYBE YES.</div>
      <div class="verified-account">Verify</div>
    </div>
  </div>
  <div class="screen-answerbox">
    <div class="screen-answer blue">This was a active
    </div>
    <div class="screen-answer green">This was a active
    </div>
    <div class="screen-answer green">This was a active
    </div>
  </div>
</div>