Horizontal Accordion

Добавьте горизонтальный аккордеон без отдельной разработки

Соберите интерактивный блок там же, где и остальную страницу. Добавляйте карточки, изображения, текст и кнопки в YOOtheme Pro Builder. Плагин отвечает за работу на большом экране, телефоне и с клавиатуры.

Скачать плагин бесплатно

Бесплатный элемент для Joomla и YOOtheme Pro

Аккордеон легко нарисовать

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

Один эффект превращается в отдельную задачу по разработке и тестированию. При изменении макета или поведения эту работу приходится проверять заново.

Готовый элемент в привычном Builder

После установки Horizontal Accordion появится в списке элементов YOOtheme Pro. Добавляйте карточки, загружайте изображения, размещайте внутри заголовки, текст и кнопки.

Оставьте одну карточку на телефоне, покажите несколько на большом экране, включите swipe, hover или спокойную анимацию. Всё это настраивается в Builder.

Плагин сам рассчитывает размеры карточек, переключает их и следит, чтобы аккордеон не мешал прокрутке страницы.

Один элемент для разных страниц

Портфолио

Раскройте крупную обложку и оставьте названия других проектов по краям.

Каталог

Покажите описание и кнопку только у выбранной категории.

Презентация

Проведите посетителя по карточкам колесом мыши в полноэкранной презентации.

InteractSwipeHoverFocus / TabWheelTap

Swipe · Hover · Focus / Tab · Wheel · Tap

Попробуйте на этой странице

Наведите курсор на карточку, перейдите к ней клавишей Tab или сделайте свайп на телефоне. Здесь работает сам MSG Horizontal Accordion.

Дом на склоне

Длинный фасад следует рельефу, а окна открывают вид на долину.

Архитектура · 2026

Квартира для коллекционера

Спокойный интерьер стал фоном для графики, керамики и мебели.

Интерьер · 118 м²

Серия Line

Стол, консоль и скамья собраны на одном тонком металлическом профиле.

Предметный дизайн · 3 объекта

Собирайте карточки из элементов YOOtheme Pro

Top хранит номер, категорию или статус.

Inner принимает Heading, Text, Button, List и другие Builder elements. Он появляется у активной карточки.

Bottom подходит для счётчика, даты, площади или подписи.

Top: <span class="accordion-card-number">01</span>
Bottom: <span class="accordion-card-caption">Архитектура · 2026</span>

Заполните Accessible card label у каждой карточки. Библиотека использует его для технической кнопки.

Управляется так, как удобно посетителю

Аккордеон не требует отдельной навигации. На большом экране карточка открывается по hover, на телефоне — касанием или swipe. Колесо мыши и тачпад могут переключать карточки, если включить wheel в настройках.

Карточки также доступны с клавиатуры: перейдите к нужной карточке клавишей Tab и откройте её Enter или Space. На первой и последней карточке прокрутка колесом в направлении выхода снова передаётся странице.

Все настройки остаются в Builder

В Layout задаются initial_index, visible_default, visible_small, visible_medium, visible_large, visible_xlarge, desktop_breakpoint, window_enabled и mobile_active_width.

В Interactions находятся hover_enabled, tap_enabled, swipe_enabled, wheel_enabled, wheel_magnet_enabled и keyboard_enabled. Для анимации используйте animation_effect: Layout, Expo, Reveal, Depth или Custom.

На первой и последней карточке колесо в направлении выхода возвращает управление странице.

Оформление через props.css

Поле Advanced → CSS действует только для этого экземпляра.

.el-element .accordion-card-number {
  display: inline-flex;
  inline-size: 2.5rem;
  block-size: 2.5rem;
  border: 1px solid currentColor;
  border-radius: 50%;
}

.el-element [data-accordion-slot="inner"] {
  max-inline-size: min(36rem, 88%);
}

.el-element .accordion-card-caption {
  letter-spacing: .12em;
  text-transform: uppercase;
}

Не переопределяйте --accordion-resolved-active-width, --accordion-resolved-collapsed-width, --accordion-track-width и --accordion-track-offset.

Все параметры элемента

Ниже собраны все настройки MSG Horizontal Accordion. Откройте нужную группу: таблицы повторяют названия полей в Builder и объясняют, когда их стоит менять.

Cards — содержимое карточки

Поле	Назначение
Cards	Список карточек аккордеона. Здесь добавляют, дублируют, удаляют и меняют их порядок.
Accessible card label	Уникальное доступное имя технической кнопки карточки. Оно используется клавиатурой и скринридером.
Image, Alt Text	Фоновое изображение карточки и его альтернативный текст. Для декоративного изображения Alt Text оставляют пустым.
Preview Overlay	Декоративный HTML свёрнутой карточки. Preview скрыт от assistive technologies и становится inert, поэтому ссылки, кнопки и единственную копию важного текста размещают в Content.
Top	Верхний слот активной карточки: номер, категория или статус.
Content	Основной слот активной карточки. Принимает вложенные элементы Builder: Heading, Text, Button, List и другие.
Bottom	Нижний слот активной карточки: дата, счётчик, площадь или подпись.
Text Color	Принудительно задаёт Light или Dark для текста, кнопок и контролов поверх изображения. По умолчанию цвет не переопределяется.
Focal Point	Удерживает важную область фонового изображения в кадре. Поле доступно, когда выбрано Image; по умолчанию используется Center Center.
Preview Position	Размещает Preview Overlay по одной из девяти позиций Top, Center или Bottom × Left, Center или Right. Значение по умолчанию — Top Left.
Preview Headline Style	Применяет к Preview Overlay штатный Heading или Text style YOOtheme Pro. Значение по умолчанию — None.
Preview Font Family	Выбирает Default, Primary, Secondary или Tertiary font family. Значение по умолчанию — None.
Preview Color	Выбирает Muted, Emphasis, Primary, Secondary, Success, Warning, Danger или Background. Значение по умолчанию — None.

Settings → Height и Layout

Поле	Назначение
Height	Растягивает аккордеон на всю доступную высоту колонки. Когда включён Fill the available column space, остальные настройки Height недоступны. По умолчанию выключен.
Viewport	Высота блока относительно окна браузера: Viewport или Viewport (Subtract Next Section).
Viewport Height	Высота в процентах окна, от 0 до 100. Работает для режима Viewport.
Subtract height above	Вычитает высоту контента над блоком; удобно для страницы с фиксированной шапкой.
Minimum Height	Минимальная высота в пикселях: от 200 до 800 с шагом 50.
Initial card	Номер карточки, открытой первой. Нумерация начинается с 0.
Phone Portrait, Phone Landscape, Tablet Landscape, Desktop, Large Screens	Сколько карточек видно на каждом breakpoint. Для всех, кроме Phone Portrait, можно оставить Inherit.
Desktop breakpoint	Ширина, с которой включается desktop-логика: Small, Medium, Large или X-Large.
Enable desktop window	Сдвигает видимое окно карточек на desktop, когда активная карточка подходит к его краю.
Window start trigger offset, Window end trigger offset	На каком расстоянии от левого и правого края окно начнёт сдвигаться. Значение ограничено числом видимых карточек.
Mobile alignment	Положение активной карточки на телефоне: Start, Center или End.
Mobile active width	Ширина активной карточки на телефоне — от 20% до 80% контейнера.
Card gap, px	Расстояние между карточками: от 0 до 64 px.

Settings → Interactions

Поле	Назначение
Enable hover	Открывает карточку при наведении на desktop.
Hover intent	Задержка перед реакцией на hover в миллисекундах. Помогает избежать случайных переключений.
Enable tap	Позволяет открыть карточку касанием или кликом.
Enable swipe	Переключает карточки горизонтальным свайпом на touch-экране.
Enable wheel	Переключает карточки колесом мыши или тачпадом.
Enable wheel magnet	Притягивает прокрутку к аккордеону. Работает только при высоте Viewport = 100 и включённом Prevent default wheel.
Prevent default wheel	Не даёт странице прокручиваться, пока колесо переключает карточки. На первой и последней карточке в направлении выхода прокрутка страницы освобождается.
Invert wheel	Меняет направление переключения колесом.
Wheel threshold	Сколько прокрутки нужно накопить для одного перехода.
Wheel cooldown, ms	Пауза между переходами, если One step per gesture выключен.
Gesture end delay, ms	Через сколько миллисекунд без движения считается завершённым жест колеса.
One step per gesture	Разрешает только одно переключение до завершения текущего жеста.
Magnet offset, px	Смещение точки притяжения; используйте, если фиксированная шапка перекрывает начало блока.
Scroll-aware initial card	При входе в блок со страницы ниже выбирает граничную стартовую карточку. Доступно вместе с wheel magnet и Prevent default wheel.
Enable keyboard	Добавляет управление карточками с клавиатуры: Tab, Enter и Space.

Settings → Autoplay

Поле	Назначение
Enable autoplay	Включает autoplay начиная с выбранного Desktop breakpoint.
Enable autoplay on mobile	Включает autoplay ниже выбранного Desktop breakpoint. При значении Medium мобильный режим действует до 959 px.
Delay, ms	Полная задержка перед первым и каждым следующим автоматическим переходом. Значение должно быть больше 0.
Resume delay, ms	Задержка перед продолжением autoplay после ручного взаимодействия. Допускается значение 0.
Ping-pong loop	На границах меняет направление движения без перехода между последней и первой карточками.
Pause after interaction	После tap, swipe, wheel или управления с клавиатуры применяет Resume delay.
Pause on hover	Приостанавливает autoplay, пока указатель находится над аккордеоном.
Pause on focus	Приостанавливает autoplay, пока фокус находится внутри аккордеона.
Respect reduced motion	Останавливает autoplay, если система сообщает prefers-reduced-motion: reduce.

Settings → Animation и Advanced

Поле	Назначение
Animation effect	Профиль движения геометрии карточки и track: Layout, Expo, Reveal, Depth или Custom. Значение по умолчанию — Expo.
Custom duration, ms	Длительность геометрического перехода при Custom. Значение по умолчанию — 600 ms; 0 отключает движение.
Custom CSS timing function	CSS timing function для Custom. По умолчанию используется cubic-bezier(.16, 1, .3, 1); поле принимает корректные easing, cubic-bezier() и steps().
Top Effect	Эффект появления и скрытия Top: None, Fade или Slide Left, Right, Up, Down. Значение по умолчанию — Slide Down.
Top Easing	Easing для Top: Smooth, Standard, Ease In, Ease Out, Ease In Out или Linear. Значение по умолчанию — Smooth.
Content Effect	Эффект появления и скрытия Content: None, Fade или Slide Left, Right, Up, Down. Значение по умолчанию — Fade.
Content Easing	Easing для Content: Smooth, Standard, Ease In, Ease Out, Ease In Out или Linear. Значение по умолчанию — Smooth.
Bottom Effect	Эффект появления и скрытия Bottom: None, Fade или Slide Left, Right, Up, Down. Значение по умолчанию — Slide Up.
Bottom Easing	Easing для Bottom: Smooth, Standard, Ease In, Ease Out, Ease In Out или Linear. Значение по умолчанию — Smooth.
Enter Duration, ms	Длительность появления слотов активной карточки. Диапазон — 0–5000 ms, значение по умолчанию — 280 ms.
Enter Order	Порядок появления Top, Content и Bottom: одновременно или одна из шести последовательностей. Значение по умолчанию — Top → Content → Bottom.
Enter Stagger, ms	Интервал между стартами слотов при последовательном Enter Order. Диапазон — 0–2000 ms, значение по умолчанию — 70 ms.
Exit Duration, ms	Длительность скрытия слотов прежней активной карточки. Диапазон — 0–5000 ms, значение по умолчанию — 180 ms.
Exit Order	Порядок скрытия Top, Content и Bottom. Mirrored повторяет Enter Order в обратном направлении и используется по умолчанию.
Exit Stagger, ms	Интервал между стартами слотов при последовательном Exit Order. Диапазон — 0–2000 ms, значение по умолчанию — 50 ms.
Preview Show Effect	Эффект появления Preview Overlay на свёрнутой карточке. Доступны None, Fade и четыре направления Slide; значение по умолчанию — Fade.
Preview Show Easing	Easing появления Preview Overlay. Значение по умолчанию — Smooth.
Preview Hide Effect	Эффект скрытия Preview Overlay при открытии карточки. Доступны None, Fade и четыре направления Slide; значение по умолчанию — Fade.
Preview Hide Easing	Easing скрытия Preview Overlay. Значение по умолчанию — Smooth.
Advanced → CSS	Локальный CSS только для этого экземпляра. Используйте .el-element как корневой селектор; Builder изолирует его автоматически.
Advanced → ID, Class, Attributes	Стандартные поля YOOtheme Pro для якоря, дополнительных классов и HTML-атрибутов. Они не меняют логику аккордеона.
Advanced → Dynamic Content, Visibility, Transform	Стандартные возможности Builder для динамических данных, условий показа и общей анимации страницы.

Проверьте управление перед публикацией

Техническая кнопка каждой карточки получает имя из Accessible card label, попадает в Tab-порядок и открывает карточку по Enter или Space.

При prefers-reduced-motion: reduce библиотека отключает переходы карточек и трека. Содержимое и клавиатурное управление сохраняются.

Проверьте мышь и клавиатуру.
Проверьте tap и swipe на телефоне.
При wheel magnet пройдите обе границы.
Включите reduced motion в операционной системе.

Загрузки

Здесь вы можете скачать последнюю стабильную версию расширения.

Расширение Horizontal Accordion

Скачать бесплатно

Системные требования:

Минимальные

Joomla	5.x
YOOtheme Pro	5.x
PHP	8.1

Поддержать автора

Отсканируйте QR-код для перехода в сервис пожертвований CloudTips

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Максимальная сумма 3000 ₽

Поддержать

Отсканируйте QR-код для перехода в сервис пожертвований Спасибо Мир

Ваши пожертвования не облагаются налогом, но сервис берет комиссию за свои услуги.

Сумма доната не ограничена

Поддержать

Список изменений

1.0.4

Изменено

Hover больше не запускает цепочку переходов, когда окно сдвигает карточки под неподвижным курсором. Осознанное новое наведение остаётся доступным

1.0.3

Добавлено

Добавлен независимый Preview Overlay для свёрнутых карточек. В Builder можно задать HTML-содержимое, положение, стиль заголовка, шрифт и цвет. Старое содержимое Top автоматически переносится в Preview

Изменено

Top, Content и Bottom теперь показываются только на раскрытой карточке. Для каждого элемента доступны собственные эффект и easing.

Добавлено

Добавлены общие настройки Enter и Exit: duration, порядок и задержка между элементами. Exit поддерживает явный порядок, одновременный запуск и зеркальный порядок относительно Enter.

Добавлено

Для Preview Overlay добавлены отдельные эффекты и easing появления и скрытия. Его длительность синхронизирована с перестроением карточек.

1.0.2

Добавлено

Добавлен autoplay с независимым включением для desktop и mobile

Добавлено

Добавлены настройки задержки перехода и возобновления после ручного взаимодействия

Добавлено

Добавлен ping-pong режим с движением вперёд и назад без перехода между последней и первой карточками

Добавлено

Добавлены паузы при наведении, фокусе, ручном управлении и включённом prefers-reduced-motion.

1.0.1

Изменено

Исправлен баг анимации Expo

Изменено

Исправлено отслеживание события swipe в мобильной версии

Лицензия

GPL-3.0-or-later. Использование и распространение допускаются на условиях GNU General Public License v3 или более поздней версии.

Бесплатно

Скачивание без ограничений
Использование на любом количестве сайтов

Платно

Помощь в установке и настройке
Техническая поддержка
Исправление проблем совместимости со сторонними расширениями и библиотеками
Доработка функционала под конкретные требования заказчика

Загляните в раздел услуг

Horizontal Accordion

Аккордеон легко нарисовать

Готовый элемент в привычном Builder