Author: Alexander Buzmakov

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:

IMPORTANT: 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'),
        expanded = $('.t-auto-close').attr('data-oxy-toggle-active-class'),
    	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');
        title.not($(this)).removeClass(expanded);
      	$(this).toggleClass(expanded);
    });
});

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'),
        expanded = $('.t-auto-close').attr('data-oxy-toggle-active-class'),
    	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');
        title.not($(this)).removeClass(expanded);
      	$(this).toggleClass(expanded);
    });
});

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

It's done. Now when you open any tab, the previous one will close.