Accordion on scroll using jQuery

Question

I'm working with accordion tabs. On click is working fine. Now I want to add some more functionality to it. I want on scroll these tabs should be open/change after completion of all five tabs, then move to the next section using jQuery. I tried using scrollTo but didn't achieve it.

$(document).ready(function() {

  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
});

.wrapper {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

ul#tabs {
  position: absolute;
  right: 0;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul#tabs li {
  display: flex;
  flex-direction: column;
  width: 2px;
  height: 25px;
  background-color: #252525;
  border-bottom: solid 2px grey;
  padding: 5px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}

ul#tabs li:hover {
  background-color: grey;
}

ul#tabs li.active {
  background-color: #00aeef;
}

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content-tab div {
  display: none;
}

#content-tab div.active {
  display: block;
}

#content-tab>div {
  text-align: center;
  background-color: #00618c;
  width: 450px;
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}

.block {
  width: 100%;
  height: 900px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul id="tabs">
    <li class="active"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="content-tab">
    <div class="active">Convallis quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>retra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>is quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>s nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
  </div>
</div>
<div class="block"></div>

Answer 1

Based on your new comments I think I understand. what you need to do is check on scroll if the scroll position is greater than the height of the wrapper div. If so, then change classes to active. See below:

<div class="wrapper" id="wrapper">

....

$(document).ready(function() {
  $("ul#tabs li").click(function(e) {
    var tabIndex = $(this).index();
    if (!$(this).hasClass("active")) {
      var nthChild = tabIndex + 1;
      $("ul#tabs li.active").removeClass("active");
      $(this).addClass("active");
      $("#content-tab div.active").removeClass("active");
      $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");
    } else {
      $(this).removeClass("active");
      $("#content-tab div.active").removeClass("active");
    }
  });
  $(window).scroll(function(e) {
    var bodyRect = window.document.body.getBoundingClientRect();
    var wrapperRect = window.document.getElementById("wrapper").getBoundingClientRect();
    var bodyScrollPos = (bodyRect.top * -1);

    if(bodyScrollPos >= wrapperRect.height) {
        $("#content-tab>div").addClass("active");
      $("ul#tabs li").addClass("active");
    }
  });
});

Here is a fiddle

Answer 2

I have modified your JS functionality : After All tabs have been open completed then move to the next section

Solutions :

additional class view-complete included in active Tab list in HTML

<li class="active view-complete"></li> to verified open tab view is completed.

$(document).ready(function() {

    $("#tabs li").on('click', function() {
        if ($(this).hasClass("active")) {
            return false;
        }

        $("#tabs li").removeClass("active");
        $(this).addClass("active view-complete");

        var nthChild = $(this).index() + 1;

        $("#content-tab div").removeClass("active");
        $("#content-tab div:nth-child(" + nthChild + ")").addClass("active");

        if ($("#tabs li").length === $('.view-complete').length) {
            $('html, body').animate({
                scrollTop: $(".block").offset().top
            }, 1000, function() {
               console.log('You have open all tabs completed - !done');
               $("#tabs li").removeClass("view-complete");
               $("#tabs li:nth-child(" + nthChild + ")").addClass("view-complete");
            });
        }
    });

});

.wrapper {
  position: relative;
  width: 700px;
  height: 400px;
  margin: 0 auto;
}

ul#tabs {
  position: absolute;
  right: 0;
  list-style-type: none;
  padding: 0;
  text-align: center;
}

ul#tabs li {
  display: flex;
  flex-direction: column;
  width: 2px;
  height: 25px;
  background-color: #252525;
  border-bottom: solid 2px grey;
  padding: 5px;
  margin-bottom: 4px;
  color: #fff;
  cursor: pointer;
}

ul#tabs li:hover {
  background-color: grey;
}

ul#tabs li.active {
  background-color: #00aeef;
}

ul#tab {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

#content-tab div {
  display: none;
}

#content-tab div.active {
  display: block;
}

#content-tab>div {
  text-align: center;
  background-color: #00618c;
  width: 450px;
  margin: 0 auto;
  padding: 15px 10px;
  color: #fff;
}

.block {
  width: 100%;
  height: 900px;
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul id="tabs">
    <li class="active view-complete"></li>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
  </ul>
  <div id="content-tab">
    <div class="active">Convallis quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>retra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>is quis nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>s nulla pharetra, tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
    <div>tempor molestie metus. Nunc ultrices sapien eget scelerisque vestibulum. Tempor turpis sed tellus sit amet condimentum sem.</div>
  </div>
</div>
<div class="block"></div>

its Helpful :)