[bes]

В данном примере способ почему-то не отрабатывает

<style>
#content {
  margin: 80px 10px 30px;
  float: left;
  width: 100px;
  background: green;
}
#banner {
  width: 200px;
  margin: 80px 10px 30px;
  float: left;
  background: lightgreen;
}
</style>

<div id="content">
  <table cellspacing="10px" align="center">
    ...текст...
  </table>
</div>

<div id="banner" style="padding: 15px;">
  <div id="r0">
    ...текст...
    <a href="#">Читать далее &rarr;</a>
  </div>
  <div id="r1" style="display: none;">
    ...текст...<br>    ...текст...<br>    ...текст...
    <a href="#">&larr; скрыть текст</a>
  </div>
</div>

<script>
window.onload = function () {
  var banner = document.getElementById('banner');
  var content = document.getElementById('content');

  banner.onclick = function (e) {
    e = e || event;
    var target = e.target || e.srcElement;

    if (target.tagName == 'A') {
      if (target.parentNode == banner.children[0]) {
        banner.children[1].style.display = 'block';
        banner.style.height = '';
      } else {
        banner.children[1].style.display = 'none';
        banner.style.height = (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top) + 'px';
        alert('content: ' + (content.getBoundingClientRect().bottom - content.getBoundingClientRect().top));
        alert('banner: ' + (banner.getBoundingClientRect().bottom - banner.getBoundingClientRect().top));
      }
    }
  }

}
</script>