Argthtjtr

    function rightClick() {

	fgContent = document.querySelector('#fgContent');

	rtButton = document.querySelector('#rightButton');

	fgDiv = document.querySelector('#fgDiv');

	spacing = fgDiv.clientHeight - fgContent.clientHeight;

    if (rtButton.textContent === "What's a Grimmage?") {

        nextButton = "How's it work?";

        nextDiv = document.querySelector('#whatIsIt');

    }

    // I removed a handful of similar if statements.

    fgDiv.maxHeight = fgDiv.clientHeight;

    fgDiv.minHeight = fgDiv.clientHeight;

    fgContent.innerHTML = nextDiv.innerHTML;

    fgDiv.maxHeight = nextDiv.clientHeight + spacing;

    console.log('Max height')

    fgContent.minHeight = 0;

    rtButton.textContent = nextButton;

};

    .foreground {

    position: relative;

    z-index: 1;

    width: 33%;

    margin-top: 10%;

    margin-left: 10%;

    padding: 10px;

    color: black;

    background: whitesmoke;

    height: auto;

    opacity: .85;

    border-radius: 10px;

    -moz-transition: height 1s ease;

    -webkit-transition: height 1s ease;

    -o-transition: height 1s ease;

    transition: height 1s ease;

    }

    <div class="foreground" id="fgDiv">

    <div id="fgContent">

	<h1 id="foregroundTitle" class="headline">Make a Grimmage!</h1>

	<p class="text">Balh.</p>

	</div>

	<p><div class="btn-group" style="position: relative; margin: auto;"><a href="#" class="btn btn-primary">Login / Sign up</a><button id="rightButton" onclick="rightClick()" class="btn btn-info">What's a Grimmage?</button></div> 

    </p>

    </div>

    <div class="hidden" id="whatIsIt">

	<h1 class="headline">What is a Grimmage?</h1>

	<p class="text">More blah.</p>

	<p class="text">So much blah.</p>

    </div>

var fgDiv = document.querySelector('#fgDiv');

var fgContent = document.querySelector('#fgContent');

var rtButton = document.querySelector('#rightButton');



updateDimesions(fgContent, fgContent); // First update of the dimensions



function rightClick() {

  if (rtButton.textContent === "What's a Grimmage?") {

    nextButton = "How's it work?";

    nextDiv = document.querySelector('#whatIsIt');

  }

  // I removed a handful of similar if statements.

  fgContent.innerHTML = nextDiv.innerHTML;

  rtButton.textContent = nextButton;



  updateDimesions(fgContent, nextDiv); // Second update of the dimensions

};



function updateDimesions(el, replace) {

  el.style.width = replace.scrollWidth + 'px';

  el.style.height = replace.scrollHeight + 'px';

}

.foreground {

  width: 33%;

  background: whitesmoke;

}



.foreground-inner {

  overflow: hidden;

  /* Hide the content initially */

  -moz-transition: all 1s ease;

  -webkit-transition: all 1s ease;

  -o-transition: all 1s ease;

  transition: all 1s ease;

}



.hidden {

  height: 0;

  overflow: hidden;

}



.hidden > div {

  overflow: hidden;

  /* This accounts for margin in ".scrollHeight" */

  padding: 0;

  /* Padding messes with .scrollHeight */

}

<div class="foreground" id="fgDiv">

  <div id="fgContent" class="foreground-inner">

    <h1 id="foregroundTitle" class="headline">Make a Grimmage!</h1>

    <p class="text">Balh.</p>

    <p class="text">More blah.</p>

    <p class="text">So much blah.</p>

    <p class="text">More blah.</p>

    <p class="text">So much blah.</p>

    <p class="text">More blah.</p>

    <p class="text">So much blah.</p>

  </div>

  <p>

    <div class="btn-group" style="position: relative; margin: auto;"><a href="#" class="btn btn-primary">Login / Sign up</a><button id="rightButton" onclick="rightClick()" class="btn btn-info">What's a Grimmage?</button></div>

  </p>

  <div class="hidden">

    <div id="whatIsIt">

      <h1 class="headline">What is a Grimmage?</h1>

      <p class="text">More blah.</p>

      <p class="text">So much blah.</p>

    </div>

  </div>

</div>



</div>