Html css

Implement JQuery SlideToggle Using CSS Transitions

Posted by Weston Ganger on April 11, 2015

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:


Posted in HTML / CSS and Tagged with css css-transitions 


Need help on your next project or application?

I specialize in Ruby-on-Rails, AngularJS, Javascript, Bootstrap, and Hybrid Mobile Apps with Cordova & Ionic.

Contact Me

Recommended Posts