Why did jquery code stop working after adding once() and each() to Drupal behavior?

278 views Asked by At

There was a problem with the fact that part of the js code worked several times, so I added once() and each() (see comments):

(function($, Drupal) {
  Drupal.behaviors.collapsedPricing = {
    attach: function attach(context) {
      $(".pricing .pricing-tabs-contents", context)
        .once("collapsedPricing")              // added
        .each(function() {                     // added
          const pricingTabsContents = $(this);
          if (window.innerWidth < 1001) {
            $(
              ".pricing .pricing-tabs-contents .text, .pricing .pricing-tabs-contents .blue-table-container"
            ).hide();
            pricingTabsContents.addClass("collapsed");
          }
          if (pricingTabsContents) {
            $(".pricing .pricing-tabs-contents .tab-content").click(() => {
              if (pricingTabsContents.hasClass("collapsed")) {
                $(
                  ".pricing .pricing-tabs-contents .text, .pricing .pricing-tabs-contents .blue-table-container"
                ).hide("slow");
              } else {
                $(
                  ".pricing .pricing-tabs-contents .text, .pricing .pricing-tabs-contents .blue-table-container"
                ).show("slow");
              }
              pricingTabsContents.toggleClass("collapsed");
            });
          }
        });
    }
  };
})(jQuery, Drupal);

And now js code doesn't work at all. And debugging in the browser shows that it does not go inside:

 $(".pricing .pricing-tabs-contents", context)
        .once("collapsedPricing")    
        .each(function() {  

Where did I make a mistake?

Markup:

<section class="pricing">
  <div class="pricing-tabs-container">
    <div class="pricing-tabs-contents collapsed">
      <div class="tab-content">
        <div class="title">...</div>
        <div class="text">...</div>
        <div class="blue-table-container">...</div>
      </div>
    </div>
  </div>
</section>

The essence of the functionality is to make the .pricing-tabs-contents collapsible block.

0

There are 0 answers