Animated CSS transition to tabbed element

Question

I have a jQuery tab element with different tab heights. The outer div has a dynamic height, but I want it to change smoothly when the inner elements change the tabs.

My current CSS:

.parent{
  width:500px;
  background:green;
  padding:20px;
  transition:all 1s;

}

.tab1{
  width:300px;
  height:100px;
  background:red;
}

.tab2{
  width:300px;
  height:500px;
  background:blue;
  display:none;
}

.parent button{
  display:inline-block;
  vertical-align:middle;
}

This script shows the behavior: https://jsfiddle.net/mh5b91gx/

I tried using min-height and max-height, but could not do it. Can you guys help me?

Answer 1

The closest thing that I could come up with without changing your HTML is: http://codepen.io/BenCodeZen/pen/rePLpP , but this is janky from the user's point of view, and not what I would recommend.

$('#tab1').on('click', function(event) {
    $('.tab2').slideUp(400);
    $('.tab1').delay(400).slideDown();
    /* Act on the event */
});


$('#tab2').on('click', function(event) {
    $('.tab1').slideUp(400);
    $('.tab2').delay(400).slideDown(400);
    /* Act on the event */
});

, div . , . , , , HTML, div , JavaScript jQuery .

, :

<div class='parent'>

  <button id="tab1">Tab1</button>
  <button id="tab2">Tab2</button>

  <div class="content">
    <div id="tab1-content" class="tab-content">...</div>
    <div id="tab2-content" class="tab-content">...</div>
  </div>

</div>

" ", @Asta, , !

Answer 2

"" CSS-: https://css-tricks.com/organic-tabs/.

Answer 3

You can try the following:

$('#tab1').on('click', function(event) {

    $('.tab2').hide('slow');
    $('.tab1').show('slow');
    /* Act on the event */
});

$('#tab2').on('click', function(event) {

    $('.tab1').hide('slow');
    $('.tab2').show('slow');
    /* Act on the event */
});