Made on
Tilda
Локальный поиск внутри вопросов и ответов Tilda. Совпадения видны сразу, а ссылкой на конкретный ответ можно поделиться. Контент и раскрытие остаются в штатном блоке.
Попробуйте найти слово в закрытом ответе. Или отправить коллеге ссылку прямо на нужный пункт.
С короткого брифа: кто ваша аудитория, какую задачу решает сайт и что посетитель должен сделать.
Затем договоримся об этапах и критериях готовности.
Сначала собираем визуальную систему: типографика, сетка, цвета, отступы и состояния элементов.
Проверяем длинные заголовки, ссылки и мобильную версию. Поиск находит слова и в этом закрытом ответе, сохраняя ссылку на справку Tilda и форматирование.
Даже «ёлка» и «елка» для поиска равнозначны. Регистр тоже не мешает найти ответ.
Да. Вопросы и ответы редактируются в штатном контенте Tilda. После изменений опубликуйте страницу снова.
Ссылка опирается на ID пункта Tilda: изменение текста или порядка не меняет её. Если удалить пункт и создать заново, у него будет другая ссылка.
Ссылки в предпросмотре ведут к его вопросам на этой демо-странице. Ниже тот же код работает на двух настоящих блоках Tilda со своими адресами ответов. После очистки запроса восстанавливаются ответы, открытые до поиска.
Предпросмотр и экспорт используют один движок. В коде нет конструктора, демонстрационных вопросов и внешних библиотек.
Вопросы, ответы и оформление задайте в Tilda. Открытие первого пункта, режим одного ответа и прокрутка к нему уже есть в настройках блока. Установите AutoscaleOFF: «Автомасштабирование — Нет».
У нужных блоков в CSS Class Name укажите uc-aw-faq без точки.
Вставьте полный код один раз в HTML-блок T123 ниже аккордеонов. Опубликуйте страницу. Проверьте поиск, Tab и Enter, очистку и открытие скопированной ссылки в новой вкладке.
Попробуйте на настоящих блоках Tilda:
Что добавляет модификация. Поиск по тексту вопросов и ответов, подсветку совпадений и отдельную ссылку на ответ. Поиск локальный для каждого блока; все слова запроса должны встретиться в одном вопросе или его ответе. Ничего не отправляется на сервер.
Что остаётся штатным. Содержимое, семантика кнопок и раскрытие ответов. Скрипт обращается к нативным кнопкам Tilda и не заменяет аккордеон. В режиме одного открытого ответа поиск раскрывает первый результат, а остальные открываются вручную.
Ссылки без сюрпризов. Используется ID блока и ID пункта Tilda. Удаление и создание пункта заново меняет ссылку; копирование блока тоже создаёт другой адрес. На структурах без ID пункта действует запасной ключ по заголовку, который меняется вместе с текстом. Проверяйте ссылки на опубликованной странице.
Границы. Поддерживаются TX16N / TX16N2 со структурами T585 / T668 и отключённым автомасштабированием. Это поиск по обычному тексту FAQ, без морфологии и поиска по всему сайту. Чужие аккордеоны, Zero Block и ответы, подгружаемые сторонними скриптами, не охвачены.