Expand Sections on Scroll

Home Elementor 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!

More Free Resources

Join Our Community

Sign up to receive free resources in your inbox every week.

Wicky Design YouTube

Join Our Community

Never miss a post! Join now to receive helpful resources, tips, and tutorials in your inbox weekly. Registration is FREE and emails are delivered every Monday morning.