How to get same effect as jQuery's slideToggle using CSS 3 transitions?

Question

I want the jQuery slideToggle effect but want to use CSS3 transitions in order to invoke the GPU on an iOS device so the transition is smoother.

Answer 1

You can achieve this by transitioning height, padding's and border-width. Here is an example:

$('.run-css').click(function() {      $('.cont').toggleClass('toggled');  });

.cont {      width: 100px;      height: 100px;      border: 1px #CCC solid;      background-color: #EEE;      padding: 5px;      -webkit-transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;      transition: height .3s linear, padding-top .3s linear, padding-bottom .3s linear, border-top-width .3s linear, border-top-width .3s linear;  }  .toggled {      overflow: hidden;      padding-top: 0;      padding-bottom: 0;      height: 0;      border-width: 0 1px;  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>  <button class="run-css">CSS slideToggle</button>    <div class="cont">Toggle this div</div>

Answer 2

Sorry but this is not supported by CSS3 unless you know the exact height. There is no way to animate between 0 and auto. If you do know the exact height, you can generate some transition codes here: http://css3generator.com/