title: adding a new tab on onclick event on content of first tab
body: <p>Seems my question is too difficult or I am unable to explain my issue properly!!</p>
  
  <p>I am using barelyfitz tabifier.</p>
  
  <p>My html is:</p>
  
  <pre><code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
  
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  
          &lt;title&gt;Simple Tabber Example&lt;/title&gt;
  
          &lt;script type="text/javascript" src="tabber.js"&gt;&lt;/script&gt;
          &lt;link rel="stylesheet" href="example.css" TYPE="text/css" MEDIA="screen"&gt;
          &lt;link rel="stylesheet" href="example-print.css" TYPE="text/css" MEDIA="print"&gt;
  
          &lt;script type="text/javascript"&gt;
  
              /* Optional: Temporarily hide the "tabber" class so it does not "flash"
              on the page as plain HTML. After tabber runs, the class is changed
              to "tabberlive" and it will appear. */
  
              document.write('&lt;style type="text/css"&gt;.tabber{display:none;}&lt;\/style&gt;');
  
              function loadDetails()
               {
                  alert("here");
                  document.getElementById('myTab').tabber.tabShow(1);
                  alert("not here");
               }
  
          &lt;/script&gt;
  
      &lt;/head&gt;
  
      &lt;body&gt;
  
      &lt;h1&gt;Tabber Example&lt;/h1&gt;
  
      &lt;div class="tabber" id="myTab"&gt;
  
       &lt;div class="tabbertab"&gt;
        &lt;h2&gt;Tab 1&lt;/h2&gt;
  
          &lt;A href="#" onclick="loadDetails()";&gt;Banana&lt;/A&gt;
  
       &lt;/div&gt;
  
        &lt;div class="tabbertabhide"&gt;
            &lt;h2&gt;Tab 4&lt;/h2&gt;
            &lt;p&gt;Tab 4 content.&lt;/p&gt;
        &lt;/div&gt;
  
  
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As clear, tab 4 is initially hidden as its class is tabbertabhide.</p>
  
  <p>And tab 1 is having a text banana with onclick reference to loadDetails method.</p>
  
  <p>What I want to do is, on clicking banana, I want tab 4 to become visible. </p>
  
  <p>However, document.getElementById line in loadDetails method does not have any effect. </p>
  
  <p>Can any one please help me with this specific technical issue!!</p>
  
  <hr>
  
  <p>Below is the same issue I asked before in a generalized manner!!</p>
  
  <hr>
  
  <p>Issue:</p>
  
  <p>I have a webapplication with a search form on the index page which searches for fruits. </p>
  
  <p>Based on the search criteria entered, the result will have a list of fruits. Each member of this will have a call back link to a javascript function. Something like:</p>
  
  <pre><code>&lt;html&gt;
     &lt;head&gt;
  
       &lt;script type="text/javascript"&gt;
       //Function to load further details on fruits
        function loadDetails(){
      //this will do a call back to server and will fetch details in a transfer object                
         }
  
        &lt;/script&gt;
     &lt;/head&gt;
  
     &lt;body&gt;
       &lt;form method="post"&gt;
          &lt;A href="#" onclick="loadDetails('banana')";&gt;Banana&lt;/A&gt;
          &lt;A href="#" onclick="loadDetails('apple')";&gt;Apple&lt;/A&gt;
       &lt;/form&gt;
     &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Now my issue is, I want to show the details on a tab which gets generated in a loadDetails function. </p>
  
  <p>Something in the lines of <strong>www.barelyfitz.com/projects/tabber/</strong>
  But dynamic tab generation on the onclick event in the content of first tab. </p>
  
  <p>In other words, first tab will have the clickable list of fruits and on clicking a fruit, a new tab will get opened with more details on that fruit fetched from database. </p>
  
  <p>Is it possible using simple javascript ??
  Also, is it possible to do this in jquery without AJAX. I can not use ajax. </p>
  
  <p>I am extremely extremely new to javascript. So I dont know how well am able to describe my question. But have tried my best.</p>
  
  <p>Hope to get some help!!</p>