TinyMCE - adding an ON/OFF toggle switch

Question

I'm using TinyMCE on the text-areas in my Magento admin section. I have my TinyMCE editor visible form the start, but I want the option to disable/re-enable it.

I'm using the jQuery plugin version, so I added some script, which is almost working. However, it's only affecting the first instance of TinyMCE - if there are any other instances of it on the page, they are not affected.

I used this example http://tinymce.moxiecode.com/examples/example_23.php as a base for what I've done so far. But still can't figure out why it's affecting the first instance only. Any ideas? Here's my code:

var $j = jQuery.noConflict();
// Add ON OFF toggle switch
$j(function() {
$j('textarea').after("<br/><span class=\"toggle form-button\">Toggle TinyMCE</span>"); 
$j("span.toggle").toggle(function(){
$j('.wrapper').find('textarea').tinymce().hide();
        }, function () {
$j('.wrapper').find('textarea').tinymce().show();
    });
});

Answer 1

Works ok if I repeat the script for each separate text area, like textarea:eq(0), textarea:eq(1) etc. Don't know why, but it'll do.

UPDATE:

The way they have the jQuery show/hide example on the tinymce site doesn't actually work. Instead of just hiding the editor, you actually need to unload and then reload it, or else any changes made in the "toggled off" state won't be saved when the form is submitted. So you should do something like the following:

$(function() {
    var id = 'tinytextareaID'; // ID of your textarea (no # symbol) 
        $("a.toggle").toggle(function(){
           tinyMCE.execCommand('mceRemoveControl', false, id);
        }, function () {
            tinyMCE.execCommand('mceAddControl', false, id);
    });
});