title: Show and hide tabs
body: <p>I'm trying to get a basic jQuery tabs solution working. I would like the tabs to render only when a link is clicked. Following the jQuery example <a href="http://jqueryui.com/tabs/" rel="nofollow">here</a>  I can get the tabs showing no problem on my localhost, but as soon as I introduce a link to the page the tabs no longer render and instead the underlying tab content is displayed. </p>
  
  <p>Looking through Stackoverflow I see answers suggesting the use of the hide() method but I don't know:</p>
  
  <ul>
  <li>if this is the way to do it - i.e. create the tabs on page load then
  hide them?</li>
  <li><p>whether I've used it correctly?</p></li>
  <li><p>Is it also possible to have a close button on the tab group (i.e. click the button and all the tabs disappear)? </p></li>
  </ul>
  
  <p>My jsFiddle is <a href="http://jsfiddle.net/cvh2013/wYKVy/" rel="nofollow">here</a>. </p>
  
  <p>Javascript:</p>
  
  <pre><code>$("#tabs").hide();
  $("#link").click(function () {
      $("#tabs").tabs();
  });
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;a href="#" id="link"&gt;Link text&lt;/a&gt;
      &lt;div id="tabs"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#tabs-1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs-2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#tabs-3"&gt;Tab 3&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
          &lt;div id="tabs-1"&gt;
              &lt;p&gt;Tab 1 text.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="tabs-2"&gt;
              &lt;p&gt;Tab 2 text.&lt;/p&gt;
          &lt;/div&gt;
          &lt;div id="tabs-3"&gt;
              &lt;p&gt;Tab 3 text.&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>