Изменение высоты div, если класс существует внутри другого div

Question

Я хочу увеличить высоту .custom-main-container1 при нажатии на #tblHideShow, если внутри #collapsableTable div.

существует класс .collapsing.

$('#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

Если я правильно понял вашу проблему, следующие коды будут работать для вас:

 
$('#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>