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

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 >
<div >
<div >
<div >YES</div>
<div ></div>
</div>
<div >
<div >AMAZING!!!</div>
<div ></div>
</div>
<div >
<div >MAYBE YES.</div>
<div ></div>
</div>
</div>
<div >
<div >This was a active
</div>
<div >This was a active
</div>
<div >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');
});
});

CodePudding user response：

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 >
  <div >
    <div >
      <div >YES</div>
      <div >Verify</div>
    </div>
    <div >
      <div >AMAZING!!!</div>
      <div >Verify</div>
    </div>
    <div >
      <div >MAYBE YES.</div>
      <div >Verify</div>
    </div>
  </div>
  <div >
    <div >This was a active
    </div>
    <div >This was a active
    </div>
    <div >This was a active
    </div>
  </div>
</div>