Скрываем и показываем блоки по клику в Tilda
Я не знаю, что еще лучше привлечет ваше внимание, чем это красное поле…
Убедительная просьба, прочитайте статью, а не бездумно вставляйте код. Если у вас что-то не работает – это 99,99% потому что вы не внимательно прочитали или вовсе не прочитали текст. Я отвечаю многим людям и почти в 100% виновата невнимательность.Так же, напоминаю!
Если есть вопрос, что-то не работает, не получается, нужно переделать или адаптировать код к вашему проекту, пожалуйста оставьте заявку и я с вами свяжусь.
Если поставили код, а он не работает, то с вопросом, скидывайте ссылку на страницу своего проекта.Текст комментария “А я поставил, а не работает” — не может дать мне понять, что же конкретно произошло и что у вас не работает, а страницу я могу проинспектировать и понять, где вы накосячили.
ВОТ ТУТ НОВЫЙ СКРИПТ ВЗАМЕН ЭТОМУ
Ещё один способ скрывать блоки по клику на кнопки в Tilda. Данный пример подойдет для тех кто хочет сделать много вкладок. Основан он на jQuery плагине Owl Carousel. Да, фактически это слайдер, но функцию вкладок и табов он выполняет, слайды сменяют друг друга только при клике на назначенный вами триггер.
Плюс данного метода в том, что мы можем делиться ссылкой и при открытии сразу будет показана нужная вкладка.
Минусы – скрипт конфликтует с блоком плавного скролла
Пример
В примере я буду использовать 2 блока навигации – стандартный блок меню ME606 и кнопки в Zero block. В качестве блоков с контентом можно использовать как стандартные блоки, так и Zero block. Я же просто размещу Zero с иллюстрациями, которые рисовал ранее.
ME606
Как сделать вкладки из блоков в Tilda
- Создаем блок навигации (табы) – любые кнопки, как в стандартном, так и в Zero block
- Создаем блок T123, вставляем в него первый код
- Создаем блоки с контентом
- Создаем ещё один T123, вставляем в него скрипт
- Заменяем id блоков на свои
- Создаем третий T123, добавляем скрипт
- Заменяем id блоков, присваиваем названия ссылок
- Добавляем названия ссылок на свои кнопки (ссылки вида #link)
Первый Т123
<!-- Область слайдера-->
<!-- В этом блоке будут плавать твои слайды или скрытые блоки -->
<!-- Это первый Т123 -->
<div class="tabs-slider-wrapper"></div>
Это второй Т123
<!-- Тут ничего не меняешь-->
<!-- Стили плагина owl carousel-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.min.css">
<!-- Скрипт плагина owl carousel-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"></script>
<!-- Тут вставляешь id блоков-->
<script>
$(document).ready(function() {
var block = $('#rec331251923'); //id Т123 область слайдера (тот т123 который был выше)
var wrap = $('.tabs-slider-wrapper');
var slides = $('#rec331252325, #rec331253557, #rec331255351, #rec331255438, #rec331256023, #rec331256771, #rec331257477'); // id Zero block слайдов (скрытых блоков)
// Ниже ничего не меняешь
wrap.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
loop: true,
center: false,
touchDrag: false,
pullDrag: false,
freeDrag: false,
dots: false,
center: false,
nav: false,
margin: 0,
mouseDrag: false,
touchDrag: false,
autoHeight: true,
URLhashListener: true,
startPosition: 'URLHash',
responsive: {
0: {
items: 1
},
640: {
items: 1
},
1000: {
items: 1
},
}
})
});
</script>
Это третий Т123
Тут пишешь id zero блоков, которые слайды и назначаешь им ссылки.
Сейчас там стоят порядковые номера, но можешь что угодно в кавычки вписать.
Потом по этой ссылке будет вызываться слайд
Ссылки будут #first или #1 или #tvoy-variant
Ссылку можешь зацепить за любую кнопку или что угодно
Пример вверху на основе меню и на основе zero
Скрытыми могут быть любые блоки, как зеро, так и обычные
<script>
//id блока с контентом, потом ссылка, по которой появляется блок
$("#rec331252325").attr("data-hash", "first");
$("#rec331253557").attr("data-hash", "second");
$("#rec331255351").attr("data-hash", "third");
$("#rec331255438").attr("data-hash", "fourth");
$("#rec331256023").attr("data-hash", "fifth");
$("#rec331256771").attr("data-hash", "sixth");
$("#rec331257477").attr("data-hash", "seventh");
</script>
<script>
$(document).ready(function() {
var location = window.location.href;
var active = '#' + location.split('#').pop();
$('.tb').each(function() {
var link = $(this).find('a').attr('href');
if (location != link) {
$('.tb').first().addClass('active');
}
if (active == link) {
$(this).addClass('active');
} else {
$(window).bind('hashchange', function() {
var location = window.location.href;
var active = '#' + location.split('#').pop();
$('.tb').each(function() {
var link = $(this).find('a').attr('href');
if (active == link) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
});
}
});
});
</script>
<!--Стиль активной кнопки-->
<style>
.tb.active .tn-atom {
background-color:#000!important;
}
</style>