Как переключать контент при помощи выпадающего списка на Tilda?
При помощи данной модификации можно настроить переключение контента в зеро блок или сами блоки при помощи выпадающего списка. Табы с управлением через выпадающий список.
Этот генератор кода доступен только тем кто оплатил подписку
<!--TICODE--><!-- Библиотека модификаций для Тильда https://ticode.dev -->
<!--TCD000--><style>
.TCDhids {
pointer-events: none;
opacity: 0;
max-height: 0px;
position: absolute;
left: -5000px;
overflow: hidden;
}
</style>
<script>
$(function(){
var TcFilterContents = $([...Array(100)].map((_, i) => `.ti-cnt-${i + 1}`).join(', '));
TcFilterContents.addClass('TCDhids');
TcFilterContents.filter('.ti-cnt-1').removeClass('TCDhids');
var formTCDTimer = setInterval(function(){
var tcforma = $('.ti-filter form');
if (tcforma.length == 1) {
clearInterval(formTCDTimer);
tcforma.on('change', function(){
var val = $(this).find('option:checked').val();
var tcoptions = $(this).find('option');
var index = tcoptions.filter('[value="' + val + '"]').index();
var TiCodeclassName = 'ti-cnt-' + (index + 1);
TcFilterContents.addClass('TCDhids');
TcFilterContents.filter('.' + TiCodeclassName).removeClass('TCDhids');
});
}
}, 500);
});
</script>
КОПИРОВАТЬ КОД
Для нормальной работы модификации необходимо включить библиотеку jQuery. Как включить: Настройки сайта -> Еще -> Подключить jQuery на страницах сайта
1. Создаем в зеро блок форму с полем dropdown, и присваиваем ей класс ti-filter Чтобы добавить класс, нажимаем на элемент правой кнопкой мыши и выбираем из списка "Add CSS Class Name" и далее, справа в настройках указываем класс
В форме не забываем удалить кнопку. Для этого удаляем в кнопке текст и ставим высоту и ширину 0 пикселей.
2. В выпадающий список добавляем свои варианты(каждый вариант с новой строки). Например: Вариант 1 Вариант 2 Вариант 3
3. В зеро блоке создаем контент который будем показывать при выборе варианта в выпадающем списке. Можно размещать контент слоями друг под другом, если нужно показывать контент в одном месте. Контенту присваиваем класс ti-cnt-1, ti-cnt-2, ti-cnt-3.Весь контент с классом ti-cnt-1 будет показан если выбрали "Вариант 1", контент с классом ti-cnt-2 покажет при выборе "Вариант 2" и т. д.
4. Копируем код и вставляем в HTML блок Т123. Блок кода размещаем ниже формы. Примечание: Если вы указали свой класс в генераторе, например myclass, то не забываем что контенту нужно указывать класс с приставкой -число. Вот так myclass-1, myclass-2 и т. д.
Переключать можно не только контент внутри блока, но и блоки целиком. Для этого в генераторе указываем класс контента с приставкой uc- вначале, например uc-block. Дальше зеро блокам присваиваем классы uc-block-1, uc-block-2 и т. д. Чтобы добавить класс блоку, заходим в настройки блока и сверху от id блока будет кнопка "Добавить CSS Class Name"