title: add tabs with dynamic content
body: <p>hi when i click on option of the list i want add new tab which is have dynamic content. content get by given href url.</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://www.jankoatwarpspeed.com/wp-content/uploads/examples/dynamic_tabs/jquery-1.4.min.js" &gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
          $("#documents a").click(function() {
              addTab($(this));
          });
  
          $('#tabs a.tab').live('click', function() {
              // Get the tab name
              var contentname = $(this).attr("id") + "_content";
  
              // hide all other tabs
              $("#content p").hide();
              $("#tabs li").removeClass("current");
  
              // show current tab
              $("#" + contentname).show();
              $(this).parent().addClass("current");
          });
  
          $('#tabs a.remove').live('click', function() {
              // Get the tab name
              var tabid = $(this).parent().find(".tab").attr("id");
  
              // remove tab and related content
              var contentname = tabid + "_content";
              $("#" + contentname).remove();
              $(this).parent().remove();
  
              // if there is no current tab and if there are still tabs left, show the first one
              if ($("#tabs li.current").length == 0 &amp;&amp; $("#tabs li").length &gt; 0) {
  
                  // find the first tab    
                  var firsttab = $("#tabs li:first-child");
                  firsttab.addClass("current");
  
                  // get its link name and show related content
                  var firsttabid = $(firsttab).find("a.tab").attr("id");
                  $("#" + firsttabid + "_content").show();
              }
          });
      });
      function addTab(link) {
          // If tab already exist in the list, return
          if ($("#" + $(link).attr("rel")).length != 0)
              return;
  
          // hide other tabs
          $("#tabs li").removeClass("current");
          $("#content p").hide();
  
          // add new tab and related content
          $("#tabs").append("&lt;li class='current'&gt;&lt;a class='tab' id='" +
              $(link).attr("rel") + "' href='#'&gt;" + $(link).html() + 
              "&lt;/a&gt;&lt;a href='#' class='remove'&gt;x&lt;/a&gt;&lt;/li&gt;");
  
          $("#content").append("&lt;p id='" + $(link).attr("rel") + "_content'&gt;" + 
              $(link).attr("href") + "&lt;/p&gt;");
  
          // set the newly added tab as current
          $("#" + $(link).attr("rel") + "_content").show();
      }
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>this is my html code</strong></p>
  
  <pre><code>&lt;div id="main"&gt;
  &lt;div id="doclist"&gt;
      &lt;h2&gt;Documents&lt;/h2&gt;
      &lt;ul id="documents"&gt;
          &lt;li&gt;&lt;a href="#" rel="Document1" title="This is the content of Document1"&gt;Document1&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.dynamicdrive.com" rel="Document2" title="This is the content of Document2"&gt;Document2&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.dynamicdrive.com" rel="Document3" title="This is the content of Document3"&gt;Document3&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.dynamicdrive.com" rel="Document4" title="This is the content of Document4"&gt;Document4&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="http://www.dynamicdrive.com" rel="Document5" title="This is the content of Document5"&gt;Document5&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div id="wrapper"&gt;
      &lt;ul id="tabs"&gt;
          &lt;!-- Tabs go here --&gt;
      &lt;/ul&gt;
      &lt;div id="content"&gt;
          &lt;!-- Tab content goes here --&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="Document1" style="display:none;"&gt;anvdsanvidsnvsidvnsdovnsdoivnsdovsdovnsovsvsmvpsmvlksdvsmdkvmsdkvmsvsd&lt;/div&gt;
  </code></pre>
  
  <p>it's working but i don't want like this. i want display content which i mention in href.
  please help me how can i do it.</p>