title: Tabs to accordion (Woocommerce)
body: <p>I'm trying to convert the product-page tabs to an accordion on my Woocommerce store, but things won't work. When i click on my links, the dropdown doesn't show, it doesn't do nothing ... The height should animate as well as my &quot;+&quot; icon, but nothing happens. It looks like it doens't wnat to add the &quot;is-open&quot; class on the clicked element. So i think my error lies in my js, but i don't see where!</p>
  <p>Here's my tabs.php file :</p>
  <pre class="lang-php prettyprint-override"><code>&lt;?php
  
  /**
   * Single Product tabs
   *
   * This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
   *
   * HOWEVER, on occasion WooCommerce will need to update template files and you
   * (the theme developer) will need to copy the new files to your theme to
   * maintain compatibility. We try to do this as little as possible, but it does
   * happen. When this occurs the version of the template file will be bumped and
   * the readme will list any important changes.
   *
   * @see     https://docs.woocommerce.com/document/template-structure/
   * @package WooCommerce\Templates
   * @version 3.8.0
   */
  
  if (!defined('ABSPATH')) {
      exit;
  }
  
  /**
   * Filter tabs and allow third parties to add their own.
   *
   * Each tab is an array containing title, callback and priority.
   *
   * @see woocommerce_default_product_tabs()
   */
  $product_tabs = apply_filters('woocommerce_product_tabs', array());
  
  if (!empty($product_tabs)) : ?&gt;
  
      &lt;div class=&quot;c-accordion&quot;&gt;
          &lt;div class=&quot;c-accordion__wrapper&quot;&gt;
              &lt;div class=&quot;c-accordion__content-wrapper&quot;&gt;
                  &lt;?php foreach ($product_tabs as $key =&gt; $product_tab) : ?&gt;
                      &lt;div class=&quot;c-accordion__content js-accordion&quot;&gt;
                          &lt;div class=&quot;c-accordion__content-title&quot;&gt;
                              &lt;span class=&quot;c-accordion__plus&quot;&gt;&lt;/span&gt;
                              &lt;p class=&quot;u-a1&quot;&gt;
                                  &lt;?php echo wp_kses_post(apply_filters('woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key)); ?&gt;
                              &lt;/p&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;c-accordion__content-main js-content&quot;&gt;
                              &lt;?php
                              if (isset($product_tab['callback'])) {
                                  call_user_func($product_tab['callback'], $key, $product_tab);
                              }
                              ?&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;?php endforeach; ?&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;?php endif; ?&gt;
  </code></pre>
  <p>Here's my js :</p>
  <pre class="lang-js prettyprint-override"><code>// Custom Tabs
  ('use strict');
  var Accordion = /** @class */ (function () {
    function Accordion() {
      this.items = document.querySelectorAll('.js-accordion');
      this.itemClass = '.js-accordion';
      this.contentWrapperClass = '.js-content';
      this.css = {
        open: 'is-open',
      };
      if (this.items.length &gt; 0) {
        this.init();
      }
    }
    Accordion.prototype.init = function () {
      var _this = this;
      for (var i = 0; i &lt; this.items.length; i++) {
        this.items[i].addEventListener('click', function (ev) {
          ev.preventDefault();
          var current = ev.currentTarget;
          var contentWrapper = current.querySelector(_this.contentWrapperClass);
          if (!current.classList.contains(_this.css['open'])) {
            _this.slideDown(current, contentWrapper);
            return;
          }
          _this.closeItem();
        });
      }
    };
    Accordion.prototype.getActiveElement = function () {
      var accordionItems = document.querySelectorAll('' + this.itemClass);
      var active = null;
      for (var i = 0; i &lt; accordionItems.length; i++) {
        if (accordionItems[i].classList.contains(this.css['open'])) {
          active = accordionItems[i];
        }
      }
      return active;
    };
    Accordion.prototype.slideDown = function (element, content) {
      var _this = this;
      var contentHeight = 0;
      var active = this.getActiveElement();
      for (var i = 0; i &lt; this.items.length; i++) {
        this.items[i].classList.remove(this.css['open']);
      }
      element.classList.add(this.css['open']);
      if (active) {
        var activeContent = active.querySelector(this.contentWrapperClass);
        TweenMax.to(activeContent, 0.6, {
          height: 0,
          onStart: function () {
            _this.openItem(content, contentHeight);
          },
        });
        return;
      }
      // else
      this.openItem(content, contentHeight);
    };
    Accordion.prototype.openItem = function (content, contentHeight) {
      TweenMax.set(content, {
        height: 'auto',
        onComplete: function () {
          contentHeight = content.clientHeight;
          TweenMax.set(content, {
            height: 0,
            onComplete: function () {
              TweenMax.to(content, 0.4, {
                height: contentHeight,
                onComplete: function () {
                  TweenMax.set(content, {
                    height: 'auto',
                  });
                },
              });
            },
          });
        },
      });
    };
    Accordion.prototype.closeItem = function () {
      var active = this.getActiveElement();
      if (active) {
        var activeContent = active.querySelector(this.contentWrapperClass);
        active.classList.remove(this.css['open']);
        TweenMax.to(activeContent, 0.6, {
          height: 0,
        });
      }
    };
    return Accordion;
  })();
  new Accordion();
  </code></pre>
  <p>and here's my css (scss) :</p>
  <pre class="lang-css prettyprint-override"><code>.c-accordion {
      max-width: 100%;
      width: 100%;
      font-family: helvetica;
  
  
      &amp;__wrapper {
  
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          height: auto;
      }
  
      &amp;__content-wrapper {
  
          flex: 1 0 100%;
          display: flex;
          flex-direction: column;
          flex-wrap: wrap;
          justify-content: flex-start;
          align-items: stretch;
          align-content: stretch;
      }
  
      &amp;__content-title {
          position: relative;
          transition: 0.3s;
          padding-top: 10px;
          padding-bottom: 10px;
          padding-left: percentage(1/15);
      }
  
      &amp;__content-main {
          height: 0;
          overflow: hidden;
          padding-left: percentage(1/15);
          display: flex;
          flex-wrap: wrap;
  
          p {
              max-width: 300px;
          }
      }
  
      &amp;__content {
          position: relative;
          overflow: hidden;
          cursor: pointer;
          flex: 1 0 auto;
  
          &amp;:first-of-type {
              &amp;:before {
                  display: none;
              }
          }
  
          &amp;:before {
              content: '';
              width: 100%;
              border-top: 2px solid $black;
              position: absolute;
              left: 0;
              top: 0;
          }
  
          &amp;:last-child {
              &amp;:after {
  
                  content: '';
                  width: 100%;
                  border-top: 2px solid $black;
                  position: absolute;
                  left: 0;
                  bottom: 0;
              }
          }
  
  
          &amp;__text {
              padding-top: 10px;
              padding-bottom: 20px;
              line-height: 1.38;
  
          }
  
  
          &amp;:hover {}
  
          &amp;.is-open {
              transition: 0.3s;
  
              .c-accordion {
                  &amp;__plus {
                      transform: translateY(-50%) rotate(90deg);
  
                      &amp;:after {
                          opacity: 0;
                      }
                  }
  
                  &amp;__content-main {
                      height: auto;
                  }
              }
          }
      }
  
      &amp;__plus {
          width: 3vh;
          height: 3vh;
          position: absolute;
          left: 0px;
          top: 50%;
          cursor: pointer;
          opacity: 1;
          transform: translateY(-50%) rotate(0deg);
          transition: 0.4s;
  
          &amp;:before {
              content: '';
              height: 100%;
              border-left: 2px solid $black;
              position: absolute;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              opacity: 1;
          }
  
          &amp;:after {
              content: '';
              width: 100%;
              border-top: 2px solid $black;
              position: absolute;
              opacity: 1;
              left: 50%;
              top: 50%;
              transform: translate(-50%, -50%);
              transition: opacity 0.2s;
          }
      }
  
      &amp;__left {
          padding-top: 10px;
          padding-bottom: 75px;
          width: percentage(6/14);
          padding-right: 10px;
      }
  
      &amp;__right {
          padding-top: 10px;
          padding-bottom: 75px;
          width: percentage(8/14);
          padding-right: 10px;
      }
  }
  </code></pre>
  <p>Does someone have any idea what i'm doing wrong ?
  Thanks a lot !</p>