title: Tabbed Dialog Pane using jquery UI and CSS
body: <p>I have created a tabbed dialog pane just as seen here: <a href="http://jsfiddle.net/elektronikLexikon/PGRhc/" rel="nofollow">JSFiddle</a>
  And this is my full source code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$.fn.tabbedDialog = function() {
    this.tabs();
    this.dialog({
      'modal': true,
      'minWidth': 400,
      'minHeight': 300,
      'draggable': true
    });
    this.find('.ui-tab-dialog-close').append($('a.ui-dialog-titlebar-close'));
    this.find('.ui-tab-dialog-close').css({
      'position': 'absolute',
      'right': '0',
      'top': '23px'
    });
    this.find('.ui-tab-dialog-close &gt; a').css({
      'float': 'none',
      'padding': '0'
    });
    var tabul = this.find('ul:first');
    this.parent().addClass('ui-tabs').prepend(tabul).draggable('option', 'handle', tabul);
    this.siblings('.ui-dialog-titlebar').remove();
    tabul.addClass('ui-dialog-titlebar');
  }
  $('#tenant').tabbedDialog();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" rel="stylesheet"&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;div id="tenant"&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="#tenant_details"&gt;My Tenant&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#tenant_events"&gt;Events&lt;/a&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="#tenant_jobs"&gt;Jobs&lt;/a&gt;
      &lt;/li&gt;
      &lt;li class="ui-tab-dialog-close"&gt;&lt;/li&gt;
    &lt;/ul&gt;
    &lt;div&gt;
      &lt;div id="tenant_details"&gt;
        some details
      &lt;/div&gt;
      &lt;div id="tenant_events"&gt;
        some events
      &lt;/div&gt;
      &lt;div id="tenant_jobs"&gt;
        some jobs
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I preview my code on the browser it just displays the content without formatting the tabbed panes. I have actually looked at my code and everything seems fine. Is there a better approach that I have not figured out? </p>