let active = document.querySelectorAll("a");
active.forEach(function (entry) {
entry.addEventListener("click", btnSelect);
function btnSelect() {
entry.classList.contains('selected')
entry.classList.remove('selected')
this.classList.add('selected');
};
});
$('a').on('click', function(){
$('a').removeClass('selected');
$(this).addClass('selected');
});
<div class="[[+idx:is=`1`:then=`col-md-4`]][[+idx:is=`2`:then=`col-md-8`]][[+idx:is=`3`:then=`col-md-6`]][[+idx:is=`4`:then=`col-md-6`]] animate-box">
<div class="project-entry">
<a href="[[~[[+id]]]]" class="project-img text-center" style="background-image: url([[+tv.productImage]]);">
<span class="icon"><i class="icon-search2"></i></span>
</a>
<div class="desc">
<h3 class="lh20"><a href="[[~[[+id]]]]">[[pdoField? &id=`[[+id]]` &field=`pagetitle`]]</a></h3>
</div>
</div>
</div>