<style>
@media (min-width:360px) { .group1, .group2, .group3, .group4, .group5, .group6 {
opacity: 0;
pointer-events: none;
}
.visible {
opacity: 1;
pointer-events: all;
transition:all 0.3s ease;
}
.hidden {
opacity: 0;
}
.act-text .tn-atom {
color:#000!important; /*цвет текста активной кнопки*/
background-color: #E9FF71; /*цвет фона активной кнопки*/
}
}
</style>
<script>
$(document).ready(function() {
if (window.innerWidth >= 360) {
$('[class*="group"][class*="-ico"]').each(function() {
$(this).css('z-index', '2');
});
// Массивы с номерами карточек для каждой группы
var groupCards = {
1: ['.group1'], // Для первой группы
2: ['.group2', '.group3'], // Для второй группы
3: ['.group3'] // И так далее
};
// Подсчет количества групп, кнопок долджно быть столько же
var count = Object.keys(groupCards).length;
// Переменная для выбора активации (hover или click)
var activationMethod = 'hover'; // Измените на 'click' для активации по клику
function setActiveGroup(groupNumber) {
var groupIcoClass = '.group' + groupNumber + '-ico';
var groupClass = '.group' + groupNumber;
// Убираем активные классы
$('.act-text').removeClass('act-text');
$('[class*="group"]').removeClass('visible');
// Добавляем активный класс к триггеру
$('.group' + groupNumber + '-btn').addClass('act-text');
$(groupClass).addClass('visible');
// Показываем карточки, которые принадлежат выбранной группе
if (groupCards[groupNumber]) {
groupCards[groupNumber].forEach(function(cardSelector) {
$(cardSelector).addClass('visible');
});
}
}
// Цикл по всем группам
for (var i = 1; i <= count; i++) {
(function(groupNumber) {
var groupBtnSelector = '.group' + groupNumber + '-btn';
var groupIcoSelector = '.group' + groupNumber + '-ico';
if (activationMethod === 'hover') {
// Добавляем обработчик событий для наведения
$(groupBtnSelector + ', ' + groupIcoSelector).hover(function() {
setActiveGroup(groupNumber);
});
} else if (activationMethod === 'click') {
// Добавляем обработчик событий для клика
$(groupBtnSelector + ', ' + groupIcoSelector).click(function() {
setActiveGroup(groupNumber);
});
}
})(i);
}
// Устанавливаем активную первую группу по умолчанию
setActiveGroup(1);
}
});
</script>