How to Create an Accordion using Oxygen’s Tabs Element

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: