I have followed Mage documentation from Magento official website on clicking it's jumping on top: I am using 2.3.3, any way to stop jumping?

<div class="product data items"
     data-mage-init='{"mage/tabs": {"openedState": "active", "animate": {"duration": 100}, "active": 1, "disabled": [2], "disabledState": "disabled"}}'>
    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-cars">Cars</a>
    <div id="tab-cars" class="item content" data-role="content">Cars content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-movies">Movies</a>
    <div id="tab-movies" class="item content" data-role="content">Movies content</div>

    <div class="item title" data-role="collapsible">
        <a class="switch" data-toggle="trigger" href="#tab-music">Music</a>
    <div id="tab-music" class="item content" data-role="content">Music Content</div>

5 Answers 5


Now, this functionality is embedded inside lib/web/mage/collapsible.js. And to disable scrolling and transfer this possibility to scroll to the initialization options need to create mixin for this jQuery widget.


var config = {
    config: {
        mixins: {
            'mage/collapsible': {
                'js/mage/collapsible-mixin': true


], function ($) {

    var hideProps = {},
        showProps = {};

    hideProps.height =  'hide';
    showProps.height =  'show';

    return function (widget) {

        $.widget('mage.collapsible', widget, {
            options: {
                scrollTo: false

            _create: function () {
                this.storage = $.localStorage;
                this.icons = false;

                if (typeof this.options.icons === 'string') {
                    this.options.icons = $.parseJSON(this.options.icons);


                if (this.options.icons.header && this.options.icons.activeHeader) {
                    this.icons = true;

                if (this.options.scrollTo) {
                    this.element.on('dimensionsChanged', function (e) {
                        if (e.target && e.target.classList.contains('active')) {


        return $.mage.collapsible;

UPD: that was fixed in Magento 2.3.4 (Pull Request)

  • I will try and let you know if this solution works for anyone please comment here.
    – Arunendra
    Nov 14, 2019 at 12:57
  • @Volodymyr, I am experiencing the same issue and tried your method above, issue is resolved but all other collapsible sections such as discount code, summary section on cart, checkout page right nav secton etc. are stopped clicking after this implementation. Please help me on this. Nov 20, 2019 at 13:46
  • @Arunendra - did you get any final solution on this. please help me. Nov 20, 2019 at 13:47
  • @KamleshYaduwanshi If you didn't change the default behavior it should work fine. Tested on the Magento 2.3.3 (fresh install). Nov 20, 2019 at 19:49
  • @KamleshYaduwanshi I have downgraded its version to 2.3.2 as I was in a hurry.
    – Arunendra
    Nov 21, 2019 at 4:51

Looks like this have been fixed here. Worked for us. This will still trigger scrolling but only if the extended content extends beyond the bottom of the viewport. This solution has been merged to Magento repo by their team and this issue will be solved in next release.

Same issue on github. Hope this helps.


this is a new option added to magento 2.3.3

to remove it use this patch

create a file in your main dir


add this content to file

Index: lib/web/mage/collapsible.js
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
--- lib/web/mage/collapsible.js (revision 7ade7283f9b19976781dd039f15f75cf04716b66)
+++ lib/web/mage/collapsible.js (revision 3df55dc134678c0eddfd83f158a902420e5dacc6)
@@ -517,9 +517,9 @@
                 'aria-hidden': 'false'

-            this.element.trigger('dimensionsChanged', {
+            /*this.element.trigger('dimensionsChanged', {
                 opened: true
-            });
+            });*/


then import it with patch command

patch < revert_scrolltop.patch

clear cache and run

php bin/magento s:up && php bin/magento s:s:d -f

Update for version 2.3.5

As per this pr/issue, https://github.com/magento/magento2/pull/23862/files

now it is already embedded and fixed within magento core code itself.


  • Hi @shashank we are facing same issue on our Magento2.3.5 P2 version can u help me? Jun 11, 2021 at 14:20
  • Hi, just change in collapsible library as suggested in above pr and it will be fixed. Jun 11, 2021 at 16:34

override and comment the below js code in collapsible.js

this.element.trigger('dimensionsChanged', { opened: true });

this was worked for me....

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.