// // JS: jQuery('.block-title').toggleSingle(); // // Options: // destruct: defaults to false, but if true, the plugin will remove itself, display content, and remove event handlers jQuery.fn.toggleSingle = function (options) { var settings = $.extend({ destruct: false }, options); return this.each(function () { if (!settings.destruct) { $(this).on('click', function () { $(this) .next() .toggleClass('no-display') .parent() .toggleClass('active'); }); // Hide the content $this = $(this); if (!$this.parent().hasClass('active')) { $this.next().addClass('no-display'); } } else { // Remove event handler so that the toggle link can no longer be used $(this).off('click'); // Remove all classes that were added by this plugin $(this) .next() .removeClass('no-display') .parent() .removeClass('active'); } }); } // end: toggleSingle // Collapsible block - with delegated event // Modification of the standard collapsible block plugin. It has a delegated click event attached to block's container. // It is required for some blocks inside "additional sidebar" (currently: wishlist and compare) // which are created/modified dynamically by Magento's JavaScript code. jQuery.fn.toggleMultiBlocks = function (options) { var settings = $.extend({ destruct: false, blockHeadingSelector: '.block-title' }, options); return this.each(function () { // Container of blocks var $sidebar = $(this); // All blocks inside the container var $blockHeadings = $sidebar.find(settings.blockHeadingSelector); if (!settings.destruct) { $sidebar.on('click', settings.blockHeadingSelector, function(e) { $(this) .next().toggleClass('no-display') .parent().toggleClass('active'); }); // Hide the content in all blocks $blockHeadings.each(function () { var heading = $(this); if (!heading.parent().hasClass('active')) { heading.next().addClass('no-display'); // Here we may need to add that class to the next sibling // if block's content consists of more elements than just one: // .next().addClass('no-display') } else { heading.next().removeClass('no-display'); } }); } else { // Remove event handler so that the toggle link can no longer be used $sidebar.off('click'); // Remove all classes that were added by this plugin $blockHeadings .next().removeClass('no-display') .parent().removeClass('active'); } }); } // end: toggleMultiBlocks var breakpointScreenM = 768; // The same value as Magento's breakpoint @screen__m // Blocks collapsing on smaller viewports enquire.register('(max-width: ' + (breakpointScreenM - 1) + 'px)', { setup: function () { this.toggleElements = $( '.mobile-collapsible .block-title' ); this.delayedToggleElements = $( '.sidebar' ); }, match: function () { this.toggleElements.toggleSingle(); this.delayedToggleElements.toggleMultiBlocks({blockHeadingSelector: '.block:not(#layered-filter-block) .block-title'}); }, unmatch: function () { this.toggleElements.toggleSingle({destruct: true}); this.delayedToggleElements.toggleMultiBlocks({destruct: true, blockHeadingSelector: '.block:not(#layered-filter-block) .block-title'}); } }); // Blocks collapsing on all viewports. // For backward compatibility exclude blocks which have both classes: "collapsible" and "mobile-collapsible" $('.collapsible:not(.mobile-collapsible) .block-title').toggleSingle(); }); //end: on document ready }); //end: requirejs //]]>