Tinymce broken if hidden en shown by jquery?

Question

I'm using tinymce on a textfield in a form. I want to hide the form by default so i hide it with jquery.

<script>
$(document).ready(function(){

    $("#hidediv").hide();

  $("#tiny").click(function(){
    $("#hidediv").show();
  });
});
</script>

However, the textfield is kinda broken if i hide it like this, it's using tiny, but the toolbar is missing. (see screenshot) missing toolbar

If i drag the textfield to be bigger, the toolbar appears, but outside of the textfield, breaking the layout. Toolbar appears breaking layout

If i however, resize the window, the problem is gone, and the tinymce editor behaves normally. After rezise window, no problem

What am i doing wrong?

No idea what to try, i googled but answers are not working

Answer 1

I figured out that i need to initialize the editor on the onclick.

This fixed my issue

$(document).ready(function() {
  $("#divtohide").hide();    
                           
  $("#button").click(function() {                
    $('#divtohide').show();
    tinymce.init({
      selector: '#textarea_id',
      height: 500
    });
  });
});