アコーディオンの高さに基づいてボタンの位置をアニメ化する

Question

私は、ページの右側に固定された2つのボタンを上下に2つ持っています。ユーザーがトップボタンをクリックすると、コンテンツは左側にスライドし、2番目のボタンはコンテンツの下にアニメーション表示され、ユーザーにはまだ表示されます。表示されるコンテンツは実際には折りたたみ可能なパネルのアコーディオンであるため、ユーザーがaccordion-controlボタンをクリックすると、現在表示されているコンテンツが非表示になり、要求されたコンテンツが表示されます。 Iは開閉するために、1つaccordion-controlを選択した場合にのみその上アコーディオンのコンテンツの高さに応じ

号

第ボタン移動します。別のaccordion-controlを選択すると、それはposition:topから減算するのではなく、2番目のボタンのposition: topをページのさらに下に押して、上記の内容と一致するようにします。目的

は関係なく、ユーザが選択何accordion-control、コンテンツの高さに基づいて、一貫してその上にアコーディオンコンテンツの下方に位置する第二のボタンを持っていないこと。アコーディオン機能

$(function() { 
    $('.accordion-control').click(function() { 
     if($(this).next('.accordion-panel').hasClass('active')) { 
      $('.active').removeClass('active').slideUp(); //if current accord-control is clicked twice 
     } else { 
      $('.active').removeClass('active').slideUp(); 
      $(this).next('.accordion-panel').addClass('active').slideDown(); 
     } 
}); 
}) 

ため

JSFiddle

https://jsfiddle.net/patrickmcd121/55am802a/2/

jQueryのjQueryの第二ボタンを

を配置しますここでは10

---

<aside>   
<div id="faqSlider-button"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span>     
    <p class="no-margin-bottom">FAQ</p> 
</div> 

<div id="guideSlider-button"> 
    <span></span> 
    <span></span> 
    <span></span> 
    <span></span>     
    <p class="no-margin-bottom">Guide</p> 
</div> 
<div id="faqSlider"> 
    <ul class="accordion no-padding no-margin-bottom"> 
     <li> 
      <button class="accordion-control text-md-left">1. Lorem Ipsum</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">2. Lorem Ipsum</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">3. Lorem Ipsum</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
        <li><li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li></li> 
       </ul> 
      </div> 
     </li>         
    </ul> 
</div>     
<div id="guideSlider"> 
    <ul class="accordion no-padding no-margin-bottom"> 
     <li> 
      <button class="accordion-control text-md-left">1. Create your User Profile</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">2. Add the details of your Care Receivers (you can store up to four)</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
       </ul> 
      </div> 
     </li> 
     <li> 
      <button class="accordion-control text-md-left">3. Create the profiles for your Responders (you can choose up to five for each Care Receiver)</button> 
      <div class="accordion-panel"> 
       <ul class="no-padding"> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
        <li>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</li> 
       </ul> 
      </div> 
     </li>       
    </ul> 
</div> 

---

.accordion li { list-style: none; } 
.accordion button:focus { outline-color: #E6E8E3; } 
.accordion-panel li:before { 
content: url('../imgs/dash-point.png'); 
padding-right: 1rem; 
} 
.accordion-panel { display: none; padding: 1rem; background: #fff} 
.accordion-control { 
background: #fff; 
border: 1px solid #E6E8E3; 
padding: 1rem; 
width: 100%; 
} 

.accordion-control:hover, .accordion-control.active 
{ cursor: pointer; background: #eeeeee; }