Expand Sections on Scroll

August 25, 2022

In this Elementor tutorial, I will show you how I was able to recreate the expanding sections on scroll effect from the Walmart + (https://www.walmart.com/plus) website.

I learned a lot of new CSS tricks creating this video tutorial. I think this effect came out nice and I plan to use it in the future on client websites.

Change Background Color On Scroll Video:
https://www.youtube.com/watch?v=QE7akMQ2xGk

Sticky Scrolling Tab Effect Video:
https://www.youtube.com/watch?v=FB5XGftAj54

Timestamps:

  • 0:00 Introduction
  • 2:05 Tutorial Starts
  • 3:54 JavaScript Code Explained
  • 10:22 CSS Code Explained

JavaScript Code:

<script>
jQuery(function($){
    $(window).scroll(function() {
  // Wicky Design
  // selectors
  var $window = $(window),

      $panel = $('.panel');
      $panel2 = $('.panel2');
      $panel3 = $('.panel3');
      $panel4 = $('.panel4');
      $section1 = $('.section1');
      $section2 = $('.section2');
      $section3 = $('.section3');
      $section4 = $('.section4');

  var scroll = $window.scrollTop() + ($window.height() / 2);

  $panel.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $section1.addClass("showdiv");
    }
  });
    $panel2.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $section2.addClass("showdiv");
    }
  });

      $panel3.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $section3.addClass("showdiv");
    }
  });

        $panel4.each(function () {
    var $this = $(this);
    if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {
      $section4.addClass("showdiv");
    }
  });
// wickydesign.com
}).scroll();
});
</script>

CSS Code:

.section1,.section2,.section3,.section4{max-height: 0;overflow: hidden;}

.section1.showdiv,.section2.showdiv,.section3.showdiv,.section4.showdiv{
    transition-property: max-height;
    transition-duration: 700ms;
    transition-timing-function: ease-in-out;
    transition-delay: 0ms;
    overflow: hidden;
    max-height: 500px;
}

*Some of the links on this page are affiliate links, meaning we may receive a commission if you follow them. This allows us to continue providing free content and educational resources for you. Thank you for supporting our small business!

Share this post:

Facebook
Reddit
Twitter
Pinterest
LinkedIn
Email

More Free Resources

Join Our Community

Wicky Design YouTube

Get our latest videos by subscribing for FREE to our YouTube channel. New videos are uploaded weekly!