Q:

Prevent parent div from resizing when child div resizes

What I want to accomplish is after calling jQuery $().hide(), the animation to hide a child div on a current page and then show a new div in its place.   
When I call the .hide(), the parent div resizes and I do not want that.   
The parent has two divs in it, a text filled div, and the div in question so when I call the hide, only the text-only div remains.   I want the height to remain the same because the new content is going to be the same height. 
Here is what I have:
<div class="adminContent"> //Wrapper div, this should not change in height of 668px
    <div class="adminTitle"> // Text only div, remains after .hide is called
        <a href="~/Admin/Index">Admin</a> > Manage Class Roster
    </div>
<div class="resetBody" id="manageClassBody1"> // Div that is being hidden/replaced
... // div contents
</div>

CSS
.adminContent {
    background: #F7F7F7;
    -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
    border-radius: 5px;
    min-height: 668px;
}

How should I have it so that its height is static after I hide the child div?   Thanks! 
EDIT:  I want to do an in place swap of the two divs with an animation to switch between the two.   I looked at the replaceWith() provided by jQuery but I'm not sure how to use it for my needs. 

A:

I would suggest using the animation features of JQuery to accomplish your task.  
I created a sample JSBin for you.  
Example:

$(document).on("click", "#togglebtn", function() {
  var divs = $('.resetBody, .resetBody2');
  var hiddenDiv = divs.filter(":not(:visible)");
  var visibleDiv = divs.filter(":visible");

  visibleDiv.fadeToggle({
    complete: function() {
      hiddenDiv.fadeToggle();
    }
  });

});
.adminContent {
  background-color: lightgreen;
  padding: 10px;
}
.resetBody {
  background-color: #880000
}
.resetBody2 {
  background-color: lightblue
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adminContent">//Wrapper div, this should not change in height of 668px
  <div class="adminTitle">much text wow!  much text wow!  much text wow!  much text wow!  much text wow! 
    <a href="~/Admin/Index">Admin</a> > Manage Class Roster
  </div>
  <div class="resetBody">Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>Div 1
    <br/>
  </div>
  <div class="resetBody2" style="display:none">Div 2 is taller
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>Div 2
    <br/>
  </div>
</div>
<div style="margin-top:10px;">

  <button id="togglebtn">Toggle</button>
</div>

