title: Cannot read property 'display' of undefined in Jquery
body: <p>##To make next button have active class when scroll down then use changeState function to scroll the div to respective position and change data-status attribute##</p>
  
  <pre><code>let changeState = function(){
      $('.mainContainer').children('div').each(function(index,page){
          if($(page).attr('data-target') === $('.active').attr('id')){
              console.log($(page).position().top)
              $(document).animate({scrollTop: $(page).position().top},'fast');
              $(page).attr('data-state','on');
          }
          else{
              $(page).attr('data-state','off');
          }
      })
  }
  // scroll to top on document load
  $('html, body').animate({ scrollTop : 0}, 1000,function(){
      // initial scroll
      $(document).on('scroll',function (e) {
          let activeDiv= $('[data-state="on"]');
      let activeDivWidth = activeDiv.height()/2;
          let cursorScroll= $(this).scrollTop();
          let oldButton = $('#'+$(activeDiv).attr('data-target'))
  
          if(cursorScroll&gt;activeDivWidth){
              console.log($(oldButton).parent().children())
              $(oldButton).parent().children().removeClass('active');             
              $(oldButton).next().addClass('active');
              changeState();
          }
          // else{
          //  $(oldButton).prev().addClass('active');
          // }
  
  
      }); 
  });
  </code></pre>
  
  <p>});</p>
  
  <hr>
  
  <h2>HTML part having button and respected div having data- attributes to check if it is on or off and data-target to target the id of repective buttons</h2>
  
  <pre><code>&lt;div class="mainContainer"&gt; 
      &lt;nav class="navigationSection"&gt;
          &lt;div class="brandLogo"&gt;
              &lt;img class="logo" src="./images/me.png" alt=""&gt;
          &lt;/div&gt;
          &lt;ul&gt;
              &lt;li class="active"  id="homeNav"&gt;&lt;h4&gt;Home&lt;/h4&gt;&lt;/li&gt;
              &lt;li id="projectsNav"&gt;&lt;h4&gt;Projects&lt;/h4&gt;&lt;/li&gt;
              &lt;li id="contactNav"&gt;&lt;h4&gt;Contact me&lt;/h4&gt;&lt;/li&gt;
              &lt;li id="galleryNav"&gt;&lt;h4&gt;gallery&lt;/h4&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;
      &lt;div id="home" data-target="homeNav" data-state='on'&gt;
          home is here
      &lt;/div&gt;
      &lt;div id="projects" data-target="projectsNav" data-state='off'&gt;
          project is here
      &lt;/div&gt;
      &lt;div id="contact" data-target="contactNav" data-state='off'&gt;
          contact is here
      &lt;/div&gt;
      &lt;div id="gallery" data-target="galleryNav" data-state='off'&gt;
          gallery is here
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>