URL скопирован в буфер обмена!

Как переключать контент при помощи выпадающего списка на Tilda?

При помощи данной модификации можно настроить переключение контента в зеро блок или сами блоки при помощи выпадающего списка. Табы с управлением через выпадающий список.

Номер модификации в библиотеке TiCode
Модификация работает с включенным Autoscale в блоках
Модификация работает с Zero Block и стандартными блоками

Генератор кода

Класс формы
Класс контента
Войдите в аккаунт чтобы получить доступ к генератору кода
Этот генератор кода доступен только тем кто оплатил подписку
<!--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"
ВЫБЕРИ ПИЦЦУ
Мясная
Состав: колбаса, ветчина, бекон, томатный соус, сыр.
Пищевая ценность:
Жиры: 12 г
Углеводы: 25 г
Заказать
Карбонара
Состав: бекон, яйца, сыр, сливочный соус.
Пищевая ценность:
Жиры: 14 г
Углеводы: 23 г
Заказать
Гавайская
Состав: ветчина, ананас, сыр, томатный соус
Пищевая ценность:
Жиры: 10 г
Углеводы: 24 г
Заказать
Гавайская
Состав: ветчина, ананас, сыр, томатный соус
Пищевая ценность:
Жиры: 10 г
Углеводы: 24 г
Заказать
Овощная
Состав: помидоры, болгарский перец, грибы, оливки, лук, сыр, томатный соус
Пищевая ценность:
Жиры: 8 г
Углеводы: 28 г
Заказать
Made on
Tilda