title: Animate transition to new height for container div when elements removed from container
body: <p>I have made a filter with jQuery to remove some elements from a div when clicked. I use <code>opacity:0</code> and <code>visibilty:hidden</code> so there is a fade animation to these elements when they are filtered. After the fade animation I then use <code>display:none</code> to remove them from the div. If they are then unfiltered again, they are set to <code>display:block</code> and set <code>opacity:1</code> to animate them reappearing. </p>
  
  <p>When the contents of the div are "removed" using <code>display:none</code>, the height of the container div instantly sets to it's new shorter height. <strong>I would like the container div to shorten to it's new height with an animation, rather than instantly changing height.</strong> Is there a way to do this with my solution so far?</p>
  
  <p>I was expecting that adding <code>transition: all 0.35s ease-in</code> would work when the contents were removed, but it just changes instantly to it's new height. <strong>As this is a responsive design the height is not fixed, it varies at different screen widths.</strong></p>
  
  <p>The code can be viewed at the following jsfiddle...
  <a href="https://jsfiddle.net/qv5vrz6c/" rel="noreferrer">https://jsfiddle.net/qv5vrz6c/</a></p>