title: CodeMirror and JQuery tabs
body: <p>I have a problem with the jquery tabs and codemirror. By doing some searching here it was recommended to me to do call the codemirror refresh method on loading the tabs but unless I click on the area it remains hidden. Attached is sample html and script</p>
  
  <p>Any ideas?</p>
  
  <pre class="lang-js prettyprint-override"><code> &lt;script type="text/javascript"&gt;
            var editorCss;
            var htmlCss;
            $(function () {
                $("#tabs").tabs();
  
                var $tabs = $("#tabs").tabs({
                    select: function (e, ui) {
                        var thistab = ui;
                        runMethod(thistab.index);
                    }
                });       
  
                $('#code0').val('//test 0');
                $('#code1').val('//test 1');
                $('#code2').val('//test 2');
  
                    editorCss = CodeMirror.fromTextArea(document.getElementById("code1"), {});
                    htmlCss = CodeMirror.fromTextArea(document.getElementById("code2"), {});
            });
  
  
            function runMethod(tabindex) {
                switch (tabindex) {
                    case 1:
                        editorCss.refresh();
                        break;
                    case 2:
                        htmlCss.refresh();
  
                        break;
                }
            } 
      &lt;/script&gt;
  
  
  
  &lt;body&gt;
      &lt;h1&gt;CodeMirror: CSS mode&lt;/h1&gt;
      &lt;div id="tabs"&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a href="#tabs-0"&gt;General&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-1"&gt;Html&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="#tabs-2"&gt;CSS&lt;/a&gt;&lt;/li&gt;
  
      &lt;/ul&gt;
          &lt;div id="tabs-0"&gt;
              &lt;textarea id="code0" name="code0" rows="10" cols="10"&gt;&lt;/textarea&gt;
          &lt;/div&gt;
          &lt;div id="tabs-1"&gt;
           &lt;textarea id="code1" name="code1" rows="10" cols="10"&gt;&lt;/textarea&gt;
  
          &lt;/div&gt;
          &lt;div id="tabs-2"&gt;
            &lt;textarea id="code2" name="code2" rows="10" cols="10"&gt;hello 2&lt;/textarea&gt;
          &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  </code></pre>