I was having performance issues with the slideToggle because I was doing it on a full-width object. So I wanted to switch it over to CSS transitions instead. Heres how:
$('.my-toggler').click(function() {
$('.search-bar').toggleClass('show-search');
});
.search-bar {
width: 100%;
height: 100px;
background-color: #CCC;
padding: 5px;
-webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-width .3s linear;
}
.hide-search {
overflow: hidden;
padding-top: 0;
padding-bottom: 0;
height: 0;
}
<div class='search-bar hide-search'></div>
<button type='button' class='my-toggler'>Toggle<button>
Related External Links: