jQuery Toggle (Expanding Div) Inconsistent Transition With Text <p>I've got my expanding div working, however it seems the transition opens abruptly on divs with text, yet closes with a smooth transition. My code is below as is a link to a jsFiddle demo. </p> <p>How can I get the transition on the open to be as smooth as it demonstrates on the closing?</p> <p>Demo: <a href="http://jsfiddle.net/phamousphil/s34fA/1/" rel="nofollow">http://jsfiddle.net/phamousphil/s34fA/1/</a></p> <p>HTML:</p> <pre><code> &lt;div class="grid_6 containerExpand collapsedExp"&gt; &lt;div class="headerExpand"&gt;&lt;a href="http://www.google.com"&gt;the google&lt;/a&gt;&lt;br /&gt;&lt;/div&gt; &lt;div class="contentExpand"&gt; &lt;p&gt;google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff!&lt;/p&gt;&lt;br /&gt; &lt;p&gt;google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff! google stuff google stuff google stuff!&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; &lt;div class="grid_6 containerExpand collapsedExp"&gt; &lt;div class="headerExpand"&gt;&lt;a href="http://www.yahoo.com"&gt;YAHOO&lt;/a&gt;&lt;br /&gt;&lt;/div&gt; &lt;div class="contentExpand"&gt; &lt;p&gt;Yahoo!.&lt;/p&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>CSS:</p> <pre><code>.containerExpand { } .headerExpand { cursor: pointer; } .headerExpand:hover { background-color: #d3d3d3; } .collapsedExp .headerExpand { } .collapsedExp .headerExpand:hover { background-color: #d3d3d3; } .contentExpand { height: auto; min-height: 100px; overflow: hidden; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; -moz-transition: all 0.3s linear; -ms-transition: all 0.3s linear; -o-transition: all 0.3s linear; } .collapsedExp .contentExpand { min-height: 0px; height: 0px; } </code></pre> <p>JavaScript:</p> <pre><code>$(function(){ $('.headerExpand').click(function(){ $(this).closest('.containerExpand').toggleClass('collapsedExp'); $(".headerExpand").find("a").click(function(e){e.stopPropagation()}); }); }); </code></pre>