Переключатели в зеро блоке

Модификатор добавляет появление карточек при наведении на триггерные элементы в зеро блоке

jQuery
Для корректной работы блоков подключите библиотеку jQuery:
Инструкция с подключением кода
Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
Код скопирован!
Скопировать код
  1. Создаем кнопки-табы
  2. Задаем им классы group1-btn, group2-btn и т.д.
  3. Создаем карточки
  4. Задаем им последовательные классы group1, group2 и т.д.
Шаг 1
Создаем Zero Block и открываем редактор
  1. Задаем классы групп, которые должны показываться при наведении на триггер
Шаг 3
Настраиваем код
Шаг 2
Создаем блок T123 и копируем в него код
<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>
Шаблон страницы
Код скопирован!
Нажми, чтобы скопировать номер 2
Код скопирован!
Нажми, чтобы скопировать номер 1
67987353
67987507
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Текст скопирован в буфер обмена!
Вам также может быть интересно:
Подпишитесь на наши обновления в телеграм