jQuery slide animation and tinyMCE Editor

Question

I'm having a problem using tinyMCE in an interface design with jQuery .show("slide") animation. Because of the complexity of the form, It is broken down into pages much like a wizard but it does not use next and back buttons. Instead it uses section names e.d Biodata, Contact Information, Save. To spice things up, The clicked section slides into view. This "Slide" has come to define the interface amongst the developers and sponsors of the project that we refer to them as sliding forms. However, in one of the "pages", there's need for a text editor. The problem is once the editor page slides into view, I can initialize it using execCommand function of tinyMCE, But once you slide out that page and slide it back in, the editor would have lost it's content and it becomes "uneditable" even if I reinitialize it. If I however disable the slide and just load the pages with .css("display", "block"), the editors work fine, But the whole essence of our "sliding form" is lost. So is there a work around to be able to use show("slide") and preserve the editors sanity?

The code below does not work

$(this).show( "slide", { direction:"left" }, 1000 );

the code below works

$(this).css('display', 'block');

Any help is appreciated.

Answer 1

I had a similar issue awhile back and the solution was to use a outer div around tinymce with a display:none on it and init tinymce in $(document).ready and then do the slide like normal by sliding the div around the tinymce object.