Аккордеон показывает список вопросов и раскрывает выбранный ответ. Он подходит для дополнительных пояснений, которые нужны не каждому посетителю одновременно. Главное предложение, ограничения услуги и необходимый шаг обращения лучше оставлять видимыми, чтобы человеку не приходилось искать их среди закрытых пунктов.
Подготовьте реальные вопросы
В учебном примере страница курса содержит вопросы «Что потребуется для занятий?», «Как подготовить материалы для учебного сайта?» и «Что проверить после публикации?». Каждый ответ раскрывает одну задачу. Не используйте общие подписи «Вопрос 1» и не повторяйте один рекламный абзац во всех пунктах.
Начинайте ответ с сути, затем добавляйте пояснение или ссылку на подробную инструкцию. Если ответ получился полноценной большой статьёй, лучше оставить краткий ответ и понятный переход к материалу. Условия, зависящие от фактической программы курса, берите из её актуального описания.
Добавьте базовый аккордеон
- В библиотеке выберите текстовый блок вида «Аккордеон», например TX16N или TX16N2.
- Откройте «Контент» и заполните пункты вопросами и соответствующими ответами.
- Удалите демонстрационные вопросы, которые не относятся к вашей странице.
- В настройках блока задайте читаемые размеры текста и интервалы между пунктами.
- Сохраните и опубликуйте страницу.
TX16N и TX16N2 перечислены в официальной таблице доступности Tilda как аккордеоны с озвучиванием пунктов и управлением клавиатурой. Это основание выбрать готовый блок; собственные изменения и конкретную публикацию всё равно нужно проверить.
Проверьте раскрытие и содержание
На опубликованной странице откройте первый, средний и последний вопросы. Убедитесь, что появляется нужный ответ, текст не обрезается, а последующие пункты сохраняют понятное расположение. Нажмите ссылку внутри раскрытого ответа и проверьте назначение.
На телефоне проверьте длинный вопрос в несколько строк и самый большой ответ. Значок раскрытия не должен накладываться на текст. Нажиматься должна понятная область вопроса, а не крошечная точка в углу.
Проверьте клавиатуру
Дойдите до вопроса с помощью Tab, проверьте видимость фокуса и выполните раскрытие. Затем переместитесь к следующему доступному действию, включая ссылку внутри ответа. Если клавиатура перестала работать после собственной CSS или JavaScript вставки, сравните поведение блока без неё.
Не добавляйте аккордеону свой обработчик клика поверх штатного без необходимости: двойное действие может сразу открыть и закрыть ответ. Сначала установите, какая именно доработка вызывает сбой.
- Открывается не тот текст: проверьте пары вопрос–ответ в «Контенте».
- Ответ обрезается: найдите фиксированную высоту или собственную обрезку.
- Пункты выглядят одинаково непонятно: уточните вопросы по реальным задачам.
- Важные условия не замечают: перенесите их в видимое основное содержание.
Полезное продолжение — аудит клавиатурой и выбор вкладок вместо аккордеона. Для самостоятельного обучения изучите актуальные программы и условия в разделе курсов Perkova&Perkova.