Correct Iframe enlargment

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<section id=ramme>
  <iframe id="iframe" src="https://elverum.busgroup.no/query-form" height="200" width="900" scrolling="no";></iframe>
</section>

CSS

section {
  position: relative;
  height: 200px;
  width:600px;
  padding: 0;
}

#iframe {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

JavaScript

$(function() {
  $('section').on('click', expand);
});

function expand(e) {
  $('#ramme').animate({
    'height': '300'
  })
   $('#iframe').animate({
    'height': '300'
  }).css('pointer-events', 'auto');
  $('section').off('click', expand);
}