Show/hide child div on toggle

Question

When the content is displayed on the second box is placed underneath the box, in the box-container, I want it to be moved to far left, underneath both boxes, if I have multiple boxes, on multiple rows, the content should be placed underneath all boxes from the same row as clicked box, this is what I have so far:

 $('.show').click(function() { $(this).parent().parent().find('.content').slideToggle(); $(this).parent().parent().siblings().find('.content').slideUp('fast'); });

 .site-container { max-width: 1200px; }.container { display: flex; flex-wrap: wrap; }.box { width: 200px; height: 100px; border: 2px solid red; margin: 0 50px 20px 0; }.box-container { width: 250px; }.content { width: 1200px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="site-container"> <div class="container"> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> </div> </div>

https://codepen.io/tonyart/pen/VwwBzbP

Answer 1

Try this

 $('.show').click(function(){ $(this).parent().parent().find('.content').slideToggle(); $(this).parent().parent().siblings().find('.content').slideUp('fast'); });

 .site-container { max-width:1200px; }.container { display:flex; flex-wrap:wrap; position:relative; }.box { width:auto; height:100px; border:2px solid red; margin:0 50px 20px 0; }.box-container { width:20%; }.content { width:1200px; position: absolute; left: 10px; bottom: -10px; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="site-container"> <div class="container"> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> <div class="box-container"> <div class="box"> <button class="show">show</button> </div> <div class="content" style="display:none">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div> </div> </div> </div>