如果类存在于另一个 div 中，则更改 div 的高度

Question

I want to increase the height of .custom-main-container1 when you click on #tblHideShow , if the .collapsing class exists inside the #collapsableTable div.

 $('#tblHideShow').click(function() { $('#collapsableTable').toggleClass('collapsing'); if ($('#collapsableTable').hasClass('collapsing')) { $(this).parent().siblings('.custom-main-container1').css("height", "calc(100% - 241px)"); } else { $(this).parent().siblings('.custom-main-container1').css("height", "calc(100% - 314px)"); } });

 body, html { height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-main-container1"> div content here </div> <div class="xyz" id="collapsableTable"> div content here </div> <div> <a href="#" class="abc" id="tblHideShow">table collapse</a> </div>

Answer 1

If I understood right your problem the following codesnipped will work for you:

 $('#tblHideShow').click(function() { $('#collapsableTable').toggleClass('collapsing'); if ($('#collapsableTable').hasClass('collapsing')) { $(this).parent().siblings('.custom-main-container1').css("height", "200px"); }else { $(this).parent().siblings('.custom-main-container1').css("height", "100px"); } });

 .custom-main-container1{ height:200px; background-color: #45b6fe; font-size: 35px; padding: 5%; border-radius: 5px; } .xyz{ background-color: #daf0ff; height:100px; font-size: 35px; padding-left: 5%; border-radius: 5px; } .collapsing{ display:none; } .class2>#class1{ text-align: center; color: blue; } body, html { height: 100%; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="custom-main-container1"> Changeable Hight div content here </div> <div class="xyz collapsing" id="collapsableTable"> Collapseable div content here </div> <div> <a href="#" class="abc" id="tblHideShow">table collapse</a> </div>