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.