Аккордеон в Tilda: поиск по FAQ и ссылки на ответы

Аккордеон экономит место, но длинный список вопросов всё равно приходится просматривать вручную. Для раздела помощи удобнее добавить поиск и возможность отправить ссылку на конкретный ответ. Покажем, как подготовить исходный блок, настроить эти две функции и проверить поведение на мобильном сайте.

Сформулируйте заголовки так, как спрашивает посетитель: «Как изменить заказ?» понятнее, чем «Изменения». В начале ответа дайте прямой ответ, а затем детали и ссылки. Поиск помогает найти материал, но не исправляет запутанную формулировку.

Разделите слишком большой FAQ на логические группы. Вопросы об оплате, доступе и настройке сайта могут требовать разных контекстов. Одинаковое слово в нескольких длинных ответах создаёт много совпадений, поэтому заголовок должен объяснять различие.

Мод «Поиск и прямые ссылки в аккордеоне» работает со стандартными блоками T668, T585, T849, T1118 и T1119. Выберите в конструкторе ID нужного блока или общий класс для нескольких совместимых аккордеонов.

Для собственной разметки предусмотрены атрибуты data-accordion-item, data-accordion-trigger, data-accordion-title и data-accordion-content. Их нужно назначать соответствующим элементам структуры. Простое размещение нескольких текстов в Zero Block ещё не делает их совместимым аккордеоном.

Если у вас уже есть другой скрипт, управляющий открытием тех же вопросов, сначала проверьте сочетание на копии страницы. Два независимых обработчика могут по-разному менять высоту ответа и состояние кнопки.

Можно искать только по заголовкам или по вопросам вместе с ответами. Первый режим полезен для коротких, хорошо сформулированных вопросов. Второй помогает находить деталь, которая упоминается только внутри ответа, например способ получения доступа.

Поле можно разместить над аккордеоном или в отдельном шейпе Zero Block. Для второго варианта задайте шейпу класс, выбранный в настройках; пример из инструкции мода — faq-search. Если аккордеонов несколько, подготовьте по шейпу на каждый и соблюдайте одинаковый порядок.

При необходимости включите раскрытие найденных ответов и подсветку совпадений. Для длинных ответов проверьте, не становится ли результат слишком громоздким. Пустой результат должен подсказывать другой запрос, а очистка поля — возвращать полный список.

Без явного ключа адрес ответа формируется из заголовка. Если позже переименовать вопрос, старая ссылка может перестать открывать нужный пункт. Для материалов, которые отправляет поддержка, лучше сразу задать постоянный ключ.

Используйте data-faq-key или CSS-класс с префиксом faq--. Например, для вопроса о доступе можно выбрать ключ access. Ключ должен быть уникальным в используемом наборе вопросов и сохраняться после изменения текста.

Скопируйте ссылку штатной кнопкой мода и откройте её в новой вкладке: нужный ответ должен раскрыться, а заголовок остаться видимым под закреплённой шапкой. Не проверяйте только изменение адреса в уже открытой странице.

Добавьте актуальный код из конструктора в T123 после целевых блоков и опубликуйте страницу. Сначала проверьте обычное раскрытие вопроса, затем поиск и прямые ссылки. Так проще определить, на каком шаге возникла проблема.

На телефоне проверьте длинную подпись кнопки, переносы, поле поиска и видимость результата при открытой клавиатуре. Режим показа кнопки ссылки по наведению не должен делать её недоступной на сенсорном экране; мод оставляет такие кнопки видимыми на touch-устройствах.

Кнопка в режиме «После ответа» показывается у раскрытого пункта. Если она кажется пропавшей, сначала раскройте ответ и проверьте выбранное размещение.

• Запрос из заголовка находит нужный вопрос.
• Фраза из ответа находится, если включён поиск по ответам.
• Несуществующее слово показывает пустой результат, очистка возвращает вопросы.
• Прямая ссылка работает в новой вкладке и после перезагрузки.
• Постоянный ключ продолжает работать после изменения заголовка.
• Кнопки доступны клавиатурой, а фокус не прячется под шапкой.

Если длинный FAQ упирается в высоту шапки, посмотрите гайд по меню и его поведению при прокрутке. Для информации об одном товаре также подходят вкладки карточки товара.