I have 50+ textareas that I am using tinyMCE with. Instead of loading each one I am just initialising them, then activing them later on request

Initialisation

tinyMCE.init({
    mode : "none",
    theme : "advanced",
    theme_advanced_buttons1 : "",
    theme_advanced_buttons2 : "",
    theme_advanced_buttons3 : "",
    theme_advanced_toolbar_location : false,
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : false,
    theme_advanced_resizing : true,
    auto_focus : false
});

Edit Observer

$('ul span.edit-details').click(function () {
    var id = this.id;
    id = id.replace('edit-','');
    tinyMCE.execCommand('mceToggleEditor',false,'editor-'+id);
});

UPDATE I have also tried

$('ul span.edit-details').click(function () {
    var id = this.id;
    id = id.replace('edit-','');
    if($('#details-'+id).is(":hidden")) {
        $('#details-'+id).show();
        tinyMCE.execCommand('mceAddControl',false,'editor-'+id);
    }
    else {
        $('#details-'+id).hide();
        tinyMCE.execCommand('mceRemoveControl',false,'editor-'+id);
    }
});

The problem I have is that when tinyMCE.execCommand('mceToggleEditor',false,'editor-'+id); fires the pages focuses/scrolls to that textarea, even if it is already in the viewport.

Any suggestions on how to stop this?

Thanks!