Css transition - unexpected delay - css

Question

I want to create simple toggle button, that will expand/hide text paragraph. I wan't to use as little javascript as possible.
I tried it this way: Fiddle
The problem occurs when I want to hide expanded content. The content will be hidden after an unwanted delay - When user clicks the button the animation won't start immediately. I have tried it in chrome and firefox. In both I get the same behaviour.
Can someone explain me why is my code behaving this way and how to fix it?
Here is source code that is identical to the one in the fiddle link:
HTML:
<div class="container">
<h1 class="header">Header</h1>
<p class="content">
content
</p>
toggle
</div>
CSS:
.content {
max-height: 0;
overflow: hidden;
transition: max-height 1s ease-in-out;
}
.expanded .content {
max-height: 1000px;
}
Javascript:
var $container = $('.container');
$('.toggle').click(function() {
$container.toggleClass('expanded');
});

Answer 1

Add min-height instead:
.content {
max-height: 0;
overflow: hidden;
transition: min-height 1s ease-in-out;
}
.expanded .content {
min-height:20px;
}

Answer 2

Use min-height rather than max-height.
When you click 'toggle' and the div is expanded, the height of the div is reduced in 2 steps... first to it's "auto" height, then to the max-height in the original class. So what looks like a delay is actually 2 steps of height reduction.
max-height: is not an absolute value, it's ambiguous unless the content itself forces the height to be greater. The script has to calculate what the actual height is upon the transition then determine if it is greater than the max-height setting which is being transitioned to.
You can see this by just adding a defined height to the expanded class:
var $container = $('.container');
$('.toggle').on('click', function() {
$container.toggleClass('expanded');
});
.content {
max-height: 0px;
overflow: hidden;
background: #ddd;
transition: max-height .2s ease-in-out;
}
.expanded .content {
max-height: 300px;
height: 150px;
background: #ddd;
transition: max-height .2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="content">
content
</p>
toggle
</div>
If your content is actually greater and it causes the div to be taller than the max-height value, you won't have this problem. It's only an issue when the original height is less than the max-height value in the transition.
var $container = $('.container');
$('.toggle').on('click', function() {
$('.container').toggleClass('expanded');
});
.content {
max-height: 0px;
overflow: hidden;
background: #ddd;
transition: max-height .2s ease-in-out;
}
.expanded .content {
max-height: 1000px;
background: #ddd;
transition: max-height .2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh
</p>
toggle
</div>
If you adjust and use min-height you get a smooth transition. You also need to add height: 0; to the main class to completely hide the div on collapse.
var $container = $('.container');
$('.toggle').on('click', function() {
$container.toggleClass('expanded');
});
.content {
min-height: 0px;
height: 0;
overflow: hidden;
background: #ddd;
transition: min-height .2s ease-in-out;
}
.expanded .content {
min-height: 150px;
background: #ddd;
transition: min-height .2s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p class="content">
content
</p>
toggle
</div>