MENU

How to Create an Accordion using Oxygen’s Tabs Element

August 19, 2021
Posted in:

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.
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.
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.

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:

Tutorial written by Soph Simmonds
Director & Web Developer at WinuSoft Web Design & Senior Support Specialist at Oxygen. When she's not working, Soph can usually be found mountain biking with her partner, Luis.

Get in Touch

Contact us about any web, design or branding project that you have in mind. We're sure that you'll find our approach and dedication will be just what you need.

We’re always happy to discuss your project with you. Just fill out the form or give us a call to get started.
info@winusoft.co.uk
07889 216767
winusoft.co.uk
chevron-downfacebook-squarelinkedin-squaregithub-squaretwitterfacebookenvelopelinkedinxinginstagrampaper-planepinterest-pwhatsappcommentinghomemagic-wandcloud-uploaddatabaseenvelopeeyefile-addgraduation-hatpicturebooksmartphonemenuchevron-down