<style>
div[class*="tabtn_"]{
cursor:pointer;
transition:all 0.2s linear;
}
.tabEff{transform:scale(1.2)}
div[class*="tabtn_"]:not(.tabEff):hover {transform: scale(0.8)}
.tabcont-hide {
opacity: 0!important;
pointer-events: none!important;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function(){
let tabcont = document.querySelectorAll('div[class*="tabcont_"]');
tabcont.forEach(i => i.classList.add("tabcont-hide"));
let tabcontFirst = document.querySelectorAll('.tabcont_1');
tabcontFirst.forEach(i => i.classList.remove("tabcont-hide"));
let tabBtnFirst = document.querySelectorAll('.tabtn_1');
tabBtnFirst.forEach(i => i.classList.add("tabEff"));
let tabBtn = document.querySelectorAll('div[class*="tabtn_"]');
for (let i = 0; i < tabBtn.length; i++) {
tabBtn[i].addEventListener('click', function() {
let blockEl = this.closest('.t-rec');
let className = this.getAttribute('class');
let classArr = className.split(' '); let index=0;
classArr.forEach(function(item, i) {
if(item.includes('tabtn_')) index = +classArr[i].replace(/[^0-9]/g,"");
});
if(!className.includes('tabEff')) {
blockEl.querySelectorAll('div[class*="tabcont_"]').forEach(i => i.classList.add("tabcont-hide"));
blockEl.querySelectorAll('div[class*="tabtn_"]').forEach(i => i.classList.remove("tabEff"));
this.classList.add("tabEff");
blockEl.querySelectorAll('div[class*="tabcont_'+index+'"]').forEach(i => i.classList.remove("tabcont-hide"));
};
});
};
});
</script>