Slide up/down using CSS max-height transition? - html

Question

I am working on a sort of accordion slider which will have several tabs and then a block of content which will slide down on click of the tab title. I was originally going to use jQuery slideToggle() to accomplish this, but it is very choppy so I decided to attempt a CSS only approach.
Most articles I found regarding doing this in CSS suggested using max-height:0 and max-height:9999px and using transition to animate. Problem is that when I set max-height:0 it appears that the padding is still showing and the content is showing as well. How can I adjust this to make the entire dropdown content box hidden and then slide down?
$(function() {
$('.dropdown-title').click(function() {
$(this).parent().toggleClass('active');
});
});
.dropdown-item {
border:1px solid black;
}
.dropdown-title {
font-size:36px;
padding:15px 30px;
position:relative;
cursor:pointer;
}
.dropdown-item.active .dropdown-title {
background:#000;
color:#fff;
}
.dropdown-content {
max-height:0;
padding:35px 30px;
transition:max-height 0.5s;
}
.dropdown-item.active .dropdown-content {
max-height:9999px;
}
.dropdown-content p strong:first-child {
font-size:20px;
}
.dropdown-content p {
padding-bottom:0;
padding-top:25px;
margin-bottom:0;
}
.dropdown-content p:first-child {
padding-top:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="dropdown-container">
<div class="dropdown-item">
<div class="dropdown-title">Lorem Ipsum</div>
<div class="dropdown-content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sapien in nibh venenatis pulvinar nec at lorem. In eget imperdiet dolor. Nullam non volutpat quam. In vel quam mi. Sed non iaculis enim. Proin eu felis vulputate, maximus elit et, semper urna. Pellentesque massa urna, lobortis vitae iaculis sed, convallis ut turpis. Vivamus quis euismod nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sapien in nibh venenatis pulvinar nec at lorem. In eget imperdiet dolor. Nullam non volutpat quam. In vel quam mi. Sed non iaculis enim. Proin eu felis vulputate, maximus elit et, semper urna. Pellentesque massa urna, lobortis vitae iaculis sed, convallis ut turpis. Vivamus quis euismod nisi.
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur in sapien in nibh venenatis pulvinar nec at lorem. In eget imperdiet dolor. Nullam non volutpat quam. In vel quam mi. Sed non iaculis enim. Proin eu felis vulputate, maximus elit et, semper urna. Pellentesque massa urna, lobortis vitae iaculis sed, convallis ut turpis. Vivamus quis euismod nisi.
</p>
</div>
</div>
</div>

Answer 1

You need overflow: hidden on the content, and move the padding to when it's active.
.dropdown-content {
max-height: 0;
transition: max-height 0.5s;
overflow: hidden;
}
.dropdown-item.active .dropdown-content {
max-height:9999px;
padding: 35px 30px;
}