animation

HTML

<div class="">
  <button data-toggle="collapse" data-target="#demo-1">Collapsible 1</button>
  <button data-toggle="collapse" data-target="#demo-2">Collapsible 2 </button>
  <!--button data-toggle="collapse" data-target="#demo-3">Collapsible 3 </button-->
  <br>
  <br>
  <br>
</div>
<div class="container">
  <div class="container-1">
    <div id="demo-1" class="collapse in">
      <strong>This is working Example with CSS only. becuase '.container-1' has height:auto;</strong>
      
      <br>Lorem ipsum dolor text....
      <br> Lorem ipsum dolor text....
      <br> Lorem ipsum dolor text....
      <section>
        <button data-toggle="collapse" data-target="#inside-1">inside Collapse 1</button>
        <div id="inside-1" class="collapse in">
          Lorem ipsum 
          <br>Lorem ipsum 
        
          <br>Lorem ipsum 
          <br>
        </div>
      </section>
       <section>
        <button data-toggle="collapse" data-target="#inside-2">inside Collapse 2</button>
        <div id="inside-2" class="collapse in">
          Lorem ipsum
          <br>Lorem ipsum
        
          <br>Lorem ipsum 
          <br>
        </div>
      </section>

      <br> Lorem ipsum dolor text....
  
          <br>Lorem ipsum dolor text....
      <br>Lorem ipsum dolor text....
      <br>
    </div>
  </div>
  <div class="container-2">
    <div id="demo-2" class="collapse in">
      <strong>This is not working. Because here '.container-2'  has Height:120(this can be from 10px to 800px but not Auto or 100%),</strong>
      <br>Lorem ipsum dolor text....
     
      <section>
        <button data-toggle="collapse" data-target="#inside-3">inside Collapse 3</button>
        <div id="inside-3" class="collapse in">
          Lorem ipsum 
          <br>Lorem ipsum 
        
          <br>Lorem ipsum 
          <br>
        </div>
      </section>
       <section>
        <button data-toggle="collapse" data-target="#inside-4">inside Collapse 4</button>
        <div...

CSS

.collapse,
.collapsing {
  border: blue solid 1px;
  width: 80%;
  text-align: center;
}

.container {
  border: green 1px solid;
  height: 85vh;
  width: 80%;
  text-align: center;
}

.container-1,
.container-2,
.container-3 {
  width: 45%;
  height: 80px;
  /*change me to auto ---  then you will see new result this is what I want. becuase on real site height changes on every click */
  float: left;
  border: solid 1px red;
  margin-left:2%;
}

.container-1 {
  background: #F3E2A9;
  height: auto;
}

.container-2 {
  background: #81F781;
  min-height: 120px;
}

.container-3 {
  background: #778899;
  height: 180px;
}

JavaScript

$(document).ready(function(){
	$('button').click(function(){
  	$target = $(this).data('target');
    var prevHeight = $($target).height();
    $($target).parent().css('height','auto');
    
  });
});