Oxygen Builder Tutorial

How to Create an Accordion using Oxygen’s Tabs Element

Get Help with Oxygen
Blue globe and ball image
Categories:
How to create an accordion using Oxygen's Tabs element

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.

Smoothies
Soda
Sandwiches
A feast for crows. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. A good act does not wash out the bad, nor a bad act the good. Each should have its own reward. More pigeon pie, please. Pay the iron price. The Knight of Lemonwood. The North remembers. A feast for crows. As High as Honor. King in the North. The rains of castamere. The North remembers. May the Father judge him justly. The tourney of Ashford Meadows. I would like a trial by combat.
Baked bread
And now his watch is ended. More pigeon pie, please. The Dothraki do things in their own time, for their own reasons. The night is dark and full of terrors. Dunc the Lunk, thick as a castle wall. The rains of castamere. The wolf and the lion. I would like a trial by combat. It is rare to meet a Lannister who shares my enthusiasm for dead Lannisters. The War of the 5 kings. Words are like wind. Words are like wind. When you play the game of thrones, you win or you die. Can a man still be brave if he’s afraid? That is the only time a man can be brave. The winds of Winter.
Soda
The Knight of Lemonwood. King in the North. All men must die. The wolf and the lion. You know nothing, Jon Snow. Forgive my manners. I don't see many ladies these days. Lucky for the ladies. A dance of dragons. You know nothing, Jon Snow. Dunc the Lunk, thick as a castle wall. The Dothraki do things in their own time, for their own reasons. Never Resting. The battle of the redgrass field. The wolf and the lion. The battle of the redgrass field. As High as Honor.
Sandwich

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:

Phe Simmonds

Tutorial written by Phe Simmonds

Director & Web Developer at WinuSoft Web Design. When she's not working, Phe can usually be found mountain biking with her partner, Luis and dog, Bubba.
Blue background image Blue ball image

Other Tutorials

Blue circular lines

Get In Touch

Whether your business is just getting started or you’re in the middle of a growth spurt, we can design and develop a website that will help you scale.

"*" indicates required fields

Name*
This field is for validation purposes and should be left unchanged.
Copyright © 2024 WinuSoft Web Design
crosschevron-downarrow-right