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');
});
});
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>