Элемент Toggle в Oxygen: как при открытии одной вкладки, закрывать остальные?

В этой статье я хочу рассказать, как сделать автоматическое закрытие открытой вкладки элемента Toggle, при открытии каждой последующей. Стандартные опции Oxygen не позволяют это сделать. Недавно я применял такой трюк на одном из клиентских сайтов и решил поделиться с вами данным решением.

Шаг 1

Для каждой кнопки элeмента Toggle назначьте дополнительный класс t-auto-close:

Добавление дополнительного класса для элемента Toggle в Oxygen

ВАЖНО: данный способ будет работать только в том случае, если блок скрываемого контента размещён ниже кнопки открытия панели (Toggle) и размещен в непосредственной близости с кнопкой. Пример необходимой структуры видно на скриншоте выше. Если ваша структура DOM будет отличаться, то потребуется написать индивидуальный javascript-код для вашего случая.

Шаг 2

Добавьте на страницу элемент "Code Block" (+Add > Basics > Code Block), если он ещё не используется на странице.

Шаг 3

Для создания эффекта мгновенного открытия/закрытия вкладок, добавьте в секцию JavaScript элемента Code Block следующий код:

jQuery(document).ready(function($) {
    var title = $('.t-auto-close'),
        icon = $('.oxy-expand-collapse-icon'),
    	content = $('.t-auto-close').next();
    title.click(function(e) {
        e.stopPropagation();
        content.not($(this).next(content)).hide();
        $(this).next(content).toggle();
        icon.not($(this).find(icon)).addClass('oxy-eci-collapsed');
        $(this).find(icon).toggleClass('oxy-eci-collapsed');
    });
});

Для создания эффекта плавного открытия/закрытия вкладок, добавьте в секцию JavaScript элемента Code Block следующий код:

jQuery(document).ready(function($) {
    var title = $('.t-auto-close'),
        icon = $('.oxy-expand-collapse-icon'),
    	content = $('.t-auto-close').next();
    title.click(function(e) {
        e.stopPropagation();
        content.not($(this).next(content)).hide(400);
        $(this).next(content).toggle(400);
        icon.not($(this).find(icon)).addClass('oxy-eci-collapsed');
        $(this).find(icon).toggleClass('oxy-eci-collapsed');
    });
});

- где изменив значение 400 вы можете управлять плавностью эффекта.

Элемент Toggle в Oxygen: как при открытии одной вкладки, закрывать остальные?

Готово. Теперь при открытии любой вкладки, предыдущая открытая будет закрываться.

Демо

Пример получившегося поочередного мгновенного открытия/закрытия вкладок:
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Пример получившегося поочередного плавного открытия/закрытия вкладок:
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Нажмите для проверки
This is a block of text. Double-click this text to edit it.
Следите за выходом новых советов и уроков:
arrow-up