jQuery show div with child iframe (wysiwyg text editor)

Question

I have a "display: none" div with a child wysiwyg editor. I have had this problem with both jHtmlArea and CKEditor, so i believe this to be an iframe issue. For this example, I am using jHtmlArea. Without the "display: none;", everything works fine. When hidden however, I "show" the div with the child editor, and then it doesn't fully load. I had researched this issue some time ago, but couldn't find a solution. I believe I remember finding something that said that hidden iframes had some kind of reloading problem, but can't find the post. Anyone have any suggestions? Thank you ahead of time for your time and expertise!

<script type="text/javascript">
    $(document).ready(function () {
        $("textarea").htmlarea();
    });
</script>

<div id="container" style="display: none;">
    <textarea></textarea>
</div>

<a href="javascript:void(0);" onclick="$('#container').show()">Show me!</a>

I have already tried this solution to no avail.

Answer 1

Thanks to both @Humberto and @Siwei-Kang for their suggestions. Their work helped me come up with this solution.

I instantiate the htmlarea on button click, rather than on page load. I added some additional features as well:

• instantiate htmlarea in show() callback function
• textarea begins as "visibility: hidden" to reserve real estate on show(), but also to reduce flicker when htmlarea appears.
• Set textarea back to visible after htmlarea instantiation, so that "html" button still functions

See this jsFiddle

<script type="text/javascript">
    function toggle() {
        $('#container').toggle('blind', function() {
            $('#container textarea').htmlarea().css("visibility", "visible");
        });
    }
</script>

<div id="container" style="display: none;">
    <textarea style="visibility: hidden; width: 300px;"></textarea>
</div>

<a href="javascript:void(0);" onclick="toggle();">Toggle me!</a>