Implement JQuery SlideToggle Using CSS Transitions

Posted By Weston Ganger

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>