ポジションアブソリュートでボタンを右に積み重ねる問題

Question

問題を確認していただきありがとうございます。私が直面している問題は、3つの積み重ねられたボタンをポジションアブソリュートで作成することができ、JQueryの助けを借りてクラス「オープン」を追加および削除していますが、1つのボタンをクリックすると、ボタンも右にあります。私が望むのは、それらのボタンは右に留まるべきであり、クリックされたボタンは375px左に移動し、クリックされると120pxになり、他の2つは閉じた位置に留まるだけです。

ご協力いただければ幸いです。これに立ち寄って調べてくれてありがとう。

私の現在の作業コードを参照してください：

jQuery(document).ready(function($) { 
 

 
    $('#absolute-right .collapsible_section').click(function() { 
 
    $(this).toggleClass('open'); 
 

 
    }); 
 

 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
    font-size: 13px; 
 
    color: #000; 
 
} 
 

 
#absolute-right { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50px; 
 
} 
 

 
.collapsible_section { 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    width: 120px; 
 
} 
 

 
.open { 
 
    width: 320px; 
 
} 
 

 
.collapsible_section a { 
 
    color: #fff; 
 
    display: block; 
 
    padding: 10px 30px; 
 
    background: #000; 
 
    text-decoration: none; 
 
} 
 

 
.hidden_content { 
 
    background: yellow; 
 
    color: black; 
 
    padding: 10px 30px; 
 
} 
 

 
#absolute-right .collapsible_section .hidden_content { 
 
    display: none; 
 
} 
 

 
#absolute-right .open .hidden_content { 
 
    display: block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="absolute-right"> 
 

 
    <div class="collapsible_section"> 
 
    <a href="#">Button A</a> 
 
    <div class="hidden_content"> 
 
     <h3>Hidden Heading</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="collapsible_section"> 
 
    <a href="#">Button B</a> 
 
    <div class="hidden_content"> 
 
     <h3>Yo Heading</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 

 
    <div class="collapsible_section"> 
 
    <a href="#">Button C</a> 
 
    <div class="hidden_content"> 
 
     <h3>hmm Heading</h3> 
 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure 
 
     dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

が、これはあなたが探しているものです??以下のスニペットを実行してください。 親コンテナにdisplay:flexプロパティが追加され、両方ともflex-direction: column; flex-wrap: wrap-reverse;が使用されました。これは私が作った最終的な変更である - >

#absolute-right { 
    position: absolute; 
    right: 0; 
    top: 50px; 
    display: flex; 
    flex-direction: column; 
    flex-wrap: wrap-reverse; 
} 

jQuery(document).ready(function($){ 
 

 
    $('#absolute-right .collapsible_section').click(function(){ 
 
     $(this).toggleClass('open'); 
 

 
    }); 
 

 
});

html, body{ 
 
    margin: 0; 
 
    padding: 0; 
 
    font-family: arial; 
 
    font-size: 13px; 
 
    color: #000; 
 
} 
 

 
#absolute-right { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 50px; 
 
    display: flex; 
 
    flex-direction: column; 
 
    flex-wrap: wrap-reverse; 
 
} 
 

 
.collapsible_section { 
 
    margin-bottom: 10px; 
 
    position: relative; 
 
    width: 120px; 
 
} 
 

 
.open { width: 320px; } 
 

 
.collapsible_section a { 
 
    color: #fff; 
 
    display: block; 
 
    padding: 10px 30px; 
 
    background: #000; 
 
    text-decoration: none; 
 
} 
 

 
.hidden_content { 
 
    background: yellow; 
 
    color: black; 
 
    padding: 10px 30px; 
 
} 
 
#absolute-right .collapsible_section .hidden_content{ display: none; } 
 
#absolute-right .open .hidden_content{ display: block; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="absolute-right"> 
 

 
     <div class="collapsible_section"> 
 
      <a href="#">Button A</a> 
 
      <div class="hidden_content"> 
 
       <h3>Hidden Heading</h3> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="collapsible_section"> 
 
      <a href="#">Button B</a> 
 
      <div class="hidden_content"> 
 
       <h3>Yo Heading</h3> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 

 
     <div class="collapsible_section"> 
 
      <a href="#">Button C</a> 
 
      <div class="hidden_content"> 
 
       <h3>hmm Heading</h3> 
 
       <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
 
      </div> 
 
     </div> 
 
    </div>

この情報がお役に立てば幸いです。..

Answer 2

.collapsible_section { 
    margin-bottom: 10px; 
    position: relative; 
    width: 120px; 
    float: right; 
    clear: both;}