Responsive Expand Extension

Read Use of Extensions before using the responsiveExpand option.

• Live demo

Usage

Define the breaking points by using the responsiveHeight or responsiveWidth options. Read about them in the docs.

Then use the option responsiveExpand: true. For example:

$('#multiscroll').multiscroll({
     responsiveWidth: 900,
     responsiveExpand: true
});

Define the order of the left and right sides

By default the Responsive Expand extension will always place the left side before the right side on responsive mode. If you want to change this and invert the order, you can use the data-position attribute to define the order in which each section will be shown, for example:

<div id="left-side" class="ms-left">
    <div class="ms-section" data-position="1"></div>
    <div class="ms-section" data-position="4"></div>
    <div class="ms-section" data-position="6"></div>
</div>
<div id="right-side" class="ms-right">
    <div class="ms-section" data-position="2"></div>
    <div class="ms-section" data-position="3"></div>
    <div class="ms-section" data-position="5"></div>
</div>

Hide some sides

If you want to hide certain sides on responsive, just add the class ms-hide for that side and it will automatically be hidden on responsive. For example, here we will be hiding the right side of the 2nd section and the left side of the last section:

 <div id="left-side" class="ms-left">
     <div class="ms-section">Left 1</div>
     <div class="ms-section">Left 2</div>
     <div class="ms-section ms-hide">Left 3</div> <!-- to be hidden -->
 </div>
 
 <div id="right-side" class="ms-right">
     <div class="ms-section">Right 1</div>
     <div class="ms-section ms-hide">Right 2</div>  <!-- to be hidden -->
     <div class="ms-section">Right 3</div>
 </div>