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