First off, here's a demo that shows how Oxygen's Tabs element can look when custom JavaScript and jQuery are used to create an Accordion effect. I'd like to credit the guys at OxyNinja for this, as the code used in this tutorial is a modification of the code used in the Tabs element in their WooCommerce designs.
Right, onto the magic!
First off, add Oxygen's Tabs element to your site and configure it as needed. In the above example, I've used the automatically added tabs and active tabs classes to style the tab headings. I also added an icon and gave it the class accordion-icon, which is needed if you wish to rotate the icon when the tab is open.
To get the icon to rotate as the Tab is opened, I added the following CSS to a stylesheet via Manage > Stylesheets in the top right of the builder:
/* Rotate the icon when the accordion is open */
.tabs-5514-tab-active .accordion-icon {
transform: rotate(180deg);
}You will need to replace tabs-5514-tab-active in the above code with the active tab class from your site.
Next, add a Code Block element to the top of your page and add the following code to the JavaScript tab:
if (document.location.href.indexOf('ct_builder') === -1){
jQuery(document).ready(function ($) {
// Get all tab containers using the automatically added .oxy-tabs class
var oxygenTabs = $('.oxy-tabs');
// Loop through the containers
oxygenTabs.each(function (index) {
// Find all the tabs inside the container
$(this).children(".oxy-tab").each(function (index) {
// Get the tab content
const oxygenTabContent = $(this).html();
// Get the indexed tab
const indexedTabContent = $(this).parent('.oxy-tabs').next('.oxy-tabs-contents').children('.oxy-tab-content').eq(index);
// Create a button at the top of each of the tab contents
indexedTabContent.before('<button class="oxygen-tab-accordion">' + oxygenTabContent + '</button>');
});
const newAccordionButton = $(this).next('.oxy-tabs-contents').find(".oxygen-tab-accordion");
const tabClasses = $(this).children('.oxy-tab').attr('class');
const activeClass = $(this).data('oxy-tabs-active-tab-class');
// Add the active classes onto the button, but remove the active class
newAccordionButton.addClass(tabClasses);
newAccordionButton.removeClass(activeClass);
// When an accordion button is clicked
newAccordionButton.click(function () {
// Use slideToggle to open or close the accordions
$(this).next('.oxy-tab-content').slideToggle();
// If the active class exists, remove it
if ($(this).hasClass(activeClass)) {
$(this).removeClass(activeClass);
} else {
// If the active class doesn't exist, close the siblings
$(this).next().siblings('.oxy-tab-content').slideUp();
// Remove the active class from the siblings
$(this).siblings('.oxygen-tab-accordion').removeClass(activeClass);
// Add the active class to the current element
$(this).addClass(activeClass);
}
});
});
// Maybe show the accordion buttons, depending if tabs are hidden
function maybeaccordion() {
// Loop through all the tab containers
oxygenTabs.each(function (index) {
// Get the active class CSS
const activeClass = $(this).data('oxy-tabs-active-tab-class');
// Get the tab content
const abOxygenTabContent = $(this).next('.oxy-tabs-contents').children('.oxy-tab-content');
// Only show the new buttons if the Tabs are set to Display > None on a breakpoint
if ($(this).css('display') == 'none') {
$(this).next('.oxy-tabs-contents').find(".oxygen-tab-accordion").show();
abOxygenTabContent.removeClass('oxy-tabs-contents-content-hidden');
abOxygenTabContent.hide();
// Comment out these three lines to close all three tabs on load
abOxygenTabContent.prev('.oxygen-tab-accordion').removeClass(activeClass);
abOxygenTabContent.first().show();
abOxygenTabContent.first().prev().addClass(activeClass);
} else {
$(this).next('.oxy-tabs-contents').find(".oxygen-tab-accordion").hide();
abOxygenTabContent.removeAttr("style");
}
});
}
// Run on page load
maybeaccordion();
let $window = $(window);
let windowWidth = $window.width();
$window.resize(function(){
// Run again if page width changes
if ($window.width() != windowWidth) {
windowWidth = $window.width();
maybeaccordion();
}
});
});
}Finally, you need to set the Tabs container to Display > None via Advanced > Layout on the breakpoint where you wish for the Tabs to become Accordions. If you want the Tabs to display as Accordions on desktop, then you can set the Tabs container to Display > None on All Devices:
"*" indicates required fields
