Can't seem to wrap WMD Markdown Editor inside JQuery Tabs - asp.net-mvc

Question

I'm trying to place a Markdown Editor inside jQuery-UI Tabs, but the editor is not being shown.
<% Using Html.BeginForm()%>
<div id="AddEventWizard">
<ul>
<li>Event Title</li>
<li>Event Description</li>
</ul>
<div id="tabs-1">
<%: Html.LabelFor(Function(model) model.Name)%>
<%: Html.TextBoxFor(Function(model) model.Name, New With{.class = "full-width-input"})%>
<%: Html.ValidationMessage("Name", "*")%>
</div>
<div id="tabs-2">
<noscript><h3>Please use
<%: Html.ActionLink("Markdown", "Markdown", "About")%>
to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
<%: Html.TextAreaFor(Function(model) model.Description, 5, 10, New With {.id = "wmd-input", .class = "wmd-panel"})%>
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
</div>
<% End Using%>
<script type="text/javascript">
$(document).ready(function () {
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
$("#AddEventWizard").tabs({
});
}); // closes document.ready
</script>
There is space where the editor buttons "should" be, but they're not there. Does anyone know if the jQuery-UI stuff somehow blocks WMD Markdown?
Edit:
I'm using the version from Github
HTML Markup
<form action="/events/addevent" method="post">
<div id="AddEventWizard">
<ul>
<li>Event Title</li>
<li>Event Details</li>
<li>Event Description</li>
</ul>
<div id="tabs-1">
<label for="Name">Name</label>
<input class="full-width-input" id="Name" name="Name" type="text" value="" />
</div>
<div id="tabs-2"></div>
<div id="tabs-3">
<noscript><h3>Please use
Markdown
to style your input.</h3></noscript>
<div id="wmd-button-bar" class="wmd-panel">
</div>
<textarea class="wmd-panel" cols="10" id="wmd-input" name="Description" rows="5">
</textarea>
<div id="wmd-preview" class="wmd-panel">
</div>
<div class="clear">
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).ready(function () {
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
$("#AddEventWizard").tabs({
});
}); // closes document.ready
</script>
<script src="../../Assets/Scripts/wmd.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/showdown.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script src="../../Assets/Scripts/jquery.textarearesizer.compressed.js" type="text/javascript"></script>

Answer 1

Maybe you can bind the editor
$('textarea#wmd-input:not(.processed)').TextAreaResizer();
not on $(document).ready but on the click of tab3?
in that way, the editor gets loaded when the textbox is visible.