Toggle in Oxygen: how to close the rest when opening one tab?

In this article I want to tell how to make the automatic closing of the open tab of the Toggle element, at the opening of each subsequent. Standard Oxygen options do not allow this. I recently applied this trick on one of the client sites and decided to share this with you.

Step 1

For each Toggle button, assign an additional class t-auto-close:

For each Toggle button, assign an additional class

MPORTANT: this method will work only if the block of hidden content is placed below the open Toggle button and placed in close proximity to the button. An example of the required structure can be seen in the screenshot above. If your DOM structure is different, you will need to write an individual javascript code for your case.

Step 2

Add a "Code Block" element to the page (+ Add> Basics> Code Block) if it is not already used on the page.

Step 3

To create the effect of quickly opening/closing tabs, add the following code to the JavaScript section of the Code Block element:

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');
    });
});

To create the effect of slow opening/closing tabs, add the following code to the JavaScript section of the Code Block element (Thank you David Browne for this idea in Oxygen Facebook group):

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');
    });
});

- where by changing the value of 400 (for example 300, 400, 500, 600...) you can control the smoothness of the effect.

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

Is done. Now when you open any tab, the previous one will close.

Demo

An example of a consistent quick open/close tabs:
Click to check
This is a block of text. Double-click this text to edit it.
Click to check
This is a block of text. Double-click this text to edit it.
Click to check
This is a block of text. Double-click this text to edit it.
Click to check
This is a block of text. Double-click this text to edit it.
An example of a consistent smooth open/close tabs:
Click to check
This is a block of text. Double-click this text to edit it.
Click to check
This is a block of text. Double-click this text to edit it.
Click to check
This is a block of text. Double-click this text to edit it.
Click to check
This is a block of text. Double-click this text to edit it.
Follow the release of new tips and tutorials:
arrow-up