css - CSS3 animation on max-height not working as expected -

After trying a class, I am trying to animate the height of an element, here is the simplified code:

HTML

  & lt; Div class = "section" & gt; & Lt; Div class = "panel" & gt; & Lt; A href = "#" class = "toggle" & gt; Click & lt; / A & gt; & Lt; Div class = "panel-content" & gt; Some content ... & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 css  
  .section {status: relative; Width: 500px; Height: 200 pixels; Margin: Auto 100 pixels; Background: #ccc; }. Panel {Width: 65%; Status: Completed; Left: 0; Bottom: 0; }. Toggle {display: inline-block; Height: 15px; Background: #ddd; } .panel-content {max-height: 0; Hidden flurry; Infection: Maximum-height 1 S; } .active .panel-content {max-height: 99 99px; } ("Click", function (e) {e.}   
 JS   $ (function () {$ ('toggle'). PreventDefault (); $ (this) .clostest ('.panel'). ToggleClass ('active');});});   
 When I set a  .toggle  link to a  active  class on the  .panel  element Animate the height of  .panel-content , but when the class is added first, the animation is displayed without the animation, and when it is removed, the element to start animating one second Period) takes place. You can see a live demo here:  
 I tried to play with the situation and overflow properties but I could not work it, maybe there is another way to achieve that effect?  
 Thanks in advance.   
 
 
 You have to do the  transition  something happened. This is not what you want but show me something to you:  
  .pannel-content {height: 0; } .page-content: hover {height: 50px; Infection: height 2 S; }   
 How does  transition  work do you have not created any action, no click on a pseudo class, and you do not want to affect the same element anyway Are there. Try using jQuery, like.  
  & lt; Html & gt; & Lt; Top & gt; & Lt; Style type = 'text / css' & gt; . Active Panel-content {display: none; Height: 9999px; } & Lt; / Style & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div class = 'section' & gt; & Lt; Div class = 'panel' & gt; & Lt; A href = '#' square = 'toggle' & gt; Click & lt; / A & gt; & Lt; Div class = 'panel-content' & gt; Some content ... & lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Script src = "// ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script> & Lt; Script type = 'text / javascript' & gt; $ ('Toggle'). Click (function () {$ ('. Active- panel-content'). Show ('slow');}); & Lt; / Script & gt; & Lt; / Body & gt; & Lt; / Html & gt;   
 You can also use jQuery's  .animate ()  method. Of course, I would recommend that you use a DOCTYPE to Doctor and  & lt ; Meta & gt;  Use tag instead you should use external CSS, as it will be cached in your user browser memory. 
 For details and details.