垂直扩展手风琴

Question

单击时，单击的手风琴应移至顶部，这样用户可以始终向下滚动以单击其他手风琴。

被点击的对象应始终移至顶部，其他应移至下方。

我已经尝试过将单击的元素放在顶部，并且可以正常工作。 问题在于，所有定位也需要更新。

如何更新其他人的身高和顶部位置？

 if ($(element).length){
       $("#menu").prepend($(element)) 
 } 

console.clear();

   

var menuOption = $(".accordion-item"),
  numOfSlides = menuOption.length,
  slideSize = 100 / numOfSlides;

TweenMax.set(menuOption, {
  height: slideSize + "%",
  visibility: "visible"
});

menuOption.each(function(index, element) {
  var timeline = new TimelineMax({
    reversed: true
  });
  TweenMax.set(element, {
    top: slideSize * index + "%"
  });

  $(element).click(function() {
    var progress = timeline.progress();
    var notthisElement = menuOption.not(this);

    //if (progress > 0) {
    timeline.reversed(!timeline.reversed());
    //}
    console.log(timeline.reversed());
    console.log(timeline.progress());

    timeline.to($(element), 1, {
      className: '+=expanded',
      height: "100%",
      top: "0%",
      onComplete: function() {
        // if ($(element).length){
        //      $("#menu").prepend($(element)) 
        // } 
      }
    }, 0);


    $(notthisElement).each(function() {
      if (index < $(this).index()) {
        timeline.to($(this), 1, {
          top: "+=" + slideSize * (numOfSlides - (index + 1)) + "%",
          onComplete: function() {

            console.log('complete')

          }
        }, 0);
      } else {
        // if  
        timeline.to($(this), 1, {
          top: "-=" + slideSize * index + "%"
        }, 0);
      } //else
    }); // each notthisElement
  }); //click
}); //each

#menu {
  height: 100vh;
  background-color: #000222;
  position: relative;
  /*   overflow: hidden; */
  width: 100%;
}

.accordion-item {
  padding: 0;
  /*require for ken burns*/
  width: 100vw;
  position: absolute;
  visibility: hidden;
  background: white;
}

.accordion-item:hover {
  cursor: pointer;
  -webkit-transition: background-color 600ms ease-out;
  -moz-transition: background-color 600ms ease-out;
  -o-transition: background-color 600ms ease-out;
  transition: background-color 600ms ease-out;
}

.accordion-item:nth-child(1):hover {
  background: red;
}

.accordion-item:nth-child(2):hover {
  background: green;
}

.accordion-item:nth-child(3):hover {
  background: yellow;
}

.accordion-item:nth-child(4):hover {
  background: pink;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/plugins/ScrollToPlugin.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>


<section class="text-center" id="menu">

  <div class="accordion-item" id="company">
    <div class="ken_burns"></div>
    <div class="pt-custom">
      <h1>company</h1>
      <hr/>
      <p>1</p>
    </div>
  </div>
  <div class="accordion-item" id="work">
    <div class="ken_burns"></div>
    <div class="pt-custom">
      <h1>work</h1>
      <hr/>
      <p>2</p>
    </div>
  </div>
  <div class="accordion-item" id="customers">
    <div class="ken_burns"></div>
    <div class="pt-custom">
      <h1>customers</h1>
      <hr/>
      <p>3</p>
    </div>
  </div>
  <div class="accordion-item" id="contact">
    <div class="ken_burns"></div>
    <div class="pt-custom">
      <h1>contact</h1>
      <hr/>
      <p>4</p>
    </div>
  </div>

</section>

如何更新其他人的身高和顶部位置？