Tilda предлагает готовый блок с аккордеоном — TX16N2, но его структура ограничена: внутри можно разместить только текст и изображения, без возможности использовать полноценные блоки или Zero. Это создаёт сложности, если нужно встроить, например, галерею, форму, таблицу или любой сложный контент.
В этой статье делимся готовым решением, которое позволяет вставлять любые блоки Tilda — как стандартные, так и Zero — прямо внутрь раскрывающихся секций аккордеона. Ниже — пошаговая инструкция с кодом, которая поможет адаптировать аккордеон под задачи вашего проекта.
Как выглядит аккордеон TX16N2 с любыми блоками внутри
Как вставить любые блоки в слайдер TX16N2 на Tilda: пошаговая инструкция
1. Добавляем стандартный блок Tilda TX16N2 и настраиваем его на свой вкус, заполняем только заголовки, поля с описанием оставляем пустыми, в них мы будем вставлять ID блоков, которые будут в них отображаться.
2. Добавляем к блоку TX16N2 класс .uc-akkordeon
3. Ниже добавляем блоки для вставки в аккордеон (можно добавить любые блоки, как zero, так и стандартные).
4. Далее копируем ID каждого блока.
5. Вставляем скопированные ID блоков в аккордеон.
Если нужно в карточке аккордеона отобразить несколько блоков, то вставляем их уникальные ID через запятую.
6. Добавляем код под блоками для аккордеона
<script>
document.addEventListener("DOMContentLoaded", function () {
const accordion = document.querySelector(".uc-akkordeon");
if (!accordion) return;
const wrappers = accordion.querySelectorAll(".t668__textwrapper");
wrappers.forEach(wrapper => {
const rawText = wrapper.textContent.trim();
// Фильтруем ID, если они начинаются с #rec
const ids = rawText.split(",").map(id => id.trim()).filter(id => id.startsWith("#rec"));
if (ids.length > 0) {
wrapper.innerHTML = ""; // Очищаем старый текст
ids.forEach(id => {
const cleanId = id.replace("#", "");
const block = document.getElementById(cleanId);
if (block) {
wrapper.appendChild(block);
}
});
}
});
});
</script>
Нужна помощь с вставкой блоков в аккордеон Tilda TX16N2?
Если вам нужно вставить внутрь аккордеона Tilda полноценные блоки — Zero, формы, галереи, таблицы или кастомный контент — студия SHEINA может подключиться на любом этапе.
Подскажем, как внедрить нужные блоки, проверим адаптацию, поможем с установкой и аккуратно впишем решение в структуру сайта.
FAQ Частые вопросы
Можно ли вставить в аккордеон Tilda TX16N2 другие блоки — например, Zero или стандартные?
Да. Стандартный аккордеон Tilda (TX16N2) ограничен текстом и изображениями, но с помощью небольшого скрипта можно встроить внутрь полноценные блоки. Это могут быть Zero‑блоки, формы, галереи, таблицы или другие элементы — всё будет отображаться корректно внутри раскрывающейся секции.
Как вставить несколько блоков сразу в одну секцию аккордеона Tilda?
Чтобы добавить несколько элементов, достаточно указать несколько ID блоков через запятую, например #rec123456789, #rec987654321. Скрипт автоматически подставит эти блоки в выбранную карточку аккордеона по порядку. Так можно объединять контент разного типа в одном раскрывающемся пункте.
Будет ли кастомный аккордеон корректно работать на мобильной версии сайта Tilda?
Да, решение полностью совместимо с адаптивной версткой Tilda. Все встроенные блоки сохраняют размеры, отступы и поведение на мобильных устройствах. Главное — проверить, чтобы внутри используемых блоков не было активного автоскейла в Zero, который может исказить верстку.
Читать больше полезной информации: https://sheina-studio.ru/blog