Horizontal Accordeon Element

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

Соберите интерактивный блок там же, где и остальную страницу. Добавляйте карточки, изображения, текст и кнопки в 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.

Проекты · 01

Дом на склоне

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

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

Проекты · 02

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

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

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

Объекты · 03

Серия 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`	Фон карточки и альтернативное описание изображения.
`Focal Point`	Точка кадрирования фонового изображения. Нужна, когда важный объект должен оставаться в кадре на узких карточках.
`Top`	Короткий верхний слой: номер, категория, статус.
`Inner`	Основное содержимое активной карточки. Принимает обычные элементы Builder: Heading, Text, Button, List и другие.
`Bottom`	Нижний слой: дата, счётчик, площадь или подпись.
`Text Color`	Принудительно выбирает светлый или тёмный цвет текста и контролов поверх изображения.
`Inner animation`	Анимация содержимого активной карточки: None, Fade или направление Slide.
`Inner duration`	Длительность анимации `Inner` в миллисекундах. Появляется, когда выбран эффект, отличный от None.

Settings → Height и Layout

Поле	Назначение
`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 → Animation и Advanced

Поле	Назначение
`Animation effect`	Готовый профиль движения: Layout, Expo, Reveal или Depth. Custom открывает ручные поля ниже.
`Custom duration, ms`	Длительность перехода для Custom. Значение 0 отключает движение.
`Custom CSS timing function`	CSS-функция темпа для Custom: например `cubic-bezier(.16, 1, .3, 1)`, `ease-out` или `steps(4)`.
`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 Accordeon Element

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

Минимальные

Joomla	5.x
YOOtheme Pro	5.x
PHP	8.1

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

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

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

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

Поддержать

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

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

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

Поддержать

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

Лицензия

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

Бесплатно

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

Платно

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

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

Horizontal Accordeon Element

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

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