Divs expandable upward on click

I have these two expandable divs: https://jsfiddle.net/ar0j4508/31/

<div class="container_one">
    <div class='header'></div>
    <div class='container_two'>
        <div class='title show'>From 4 to 0</div>
        <div class="text hide"><br>4<br>3<br>2<br>1<br>0<br></div>
    </div>
</div>

I need to know:
1) - How to automatically show all the contained text on click;
2) - How to expand one div without expanding the other. Thanks.

Solution

For the first one How to automatically show all the contained text on click - You can do it by increasing the height of container_two div by the height of text div

For the second one How to expand one div without expanding the other - You can do it by performing your script part for the particular divs in which the click event was triggered by using `$(this) keyword like this

$(document).ready(function() {
  $(".show").click(function() {
    var $par = $(this).parent(".container_two");
    if ($par.attr('vis') == 'show') return;
    $par.parent(".container_one").find(".header").animate({
      height: '-=' + $par.find(".text").height()
    })
    $par.animate({
      height: '+=' + $par.find(".text").height()
    });

    $par.attr('vis', 'show');
  })

  $(".hide").click(function() {
    var $par = $(this).parent(".container_two");
    if ($par.attr('vis') == 'hide') return;
    $par.animate({
      height: '-=' + $par.find(".text").height()
    });
    $par.parent(".container_one").find(".header").animate({
      height: '+=' + $par.find(".text").height()
    })
    $par.attr('vis', 'hide');
  })
})

.header {
  width: 250px;
  height: 400px;
  max-height: 400px;
}

.container_one {
  width: 200px;
  border: 2px solid black;
  margin: 0 auto;
  float: left;
}

.container_two {
  height: 30px;
  overflow: hidden;
}

.title {
  background: #0f0;
  text-align: center;
  font-size: 30px;
}

.text {
  background: #0f0;
  text-align: center;
  font-size: 35px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container_one">
  <div class='header'></div>
  <div class='container_two'>
    <div class='title show'>From 4 to 0</div>
    <div class="text hide"><br>4<br><br>4<br>3<br>2<br>1<br>0<br></div>
  </div>
</div>

<div class="container_one">
  <div class='header'></div>
  <div class='container_two'>
    <div class='title show'>From 8 to 0</div>
    <div class="text hide"><br>8<br>7<br>6<br>5<br><br>4<br>3<br>2<br>1<br>0<br></div>
  </div>
</div>

Why I added max-height:400px; to header class- This is because when you are hiding the content then you are increasing the height of div by height of text and if height of text is more than 400px then on hiding the height of header will increase which will result in non-allignment of two divs(It will happen in the case when you show the second div and then hide that div.Try without max-height)