Is there a way to animate display:none to display:block using CSS so that the hidden div slides down instead of abruptly appearing, or should I go about this a different way?
$(document).ready(function() { $('#box').click(function() { $(this).find(".hidden").toggleClass('open'); }); });
#box { height:auto; background:#000; color:#fff; cursor:pointer; } .hidden { height:200px; display:none; } .hidden.open { display:block; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="box"> Initial Content <div class="hidden"> This is hidden content </div> </div>
And a JSFiddle
Advertisement
Answer
Yes, there is a way: http://jsfiddle.net/6C42Q/12/
By using CSS3 transitions, and manipulate height, rather than display property:
.hidden { height: 0px; -webkit-transition: height 0.5s linear; -moz-transition: height 0.5s linear; -ms-transition: height 0.5s linear; -o-transition: height 0.5s linear; transition: height 0.5s linear; } .hidden.open { height: 200px; -webkit-transition: height 0.5s linear; -moz-transition: height 0.5s linear; -ms-transition: height 0.5s linear; -o-transition: height 0.5s linear; transition: height 0.5s linear; }
More here: Slide down div on click Pure CSS?