title: jquery Tab content placement issue
body: <p>I have a Tab item. Which is kind of different, because it works vertically. <a href="http://jsfiddle.net/5ezT3/45/" rel="nofollow noreferrer"><strong>FIDDLE</strong></a></p>
  
  <p>Functionally it's working fine. Problem I am facing is if I click Tab 2 or Tab 3 , Tab item for these remain at the top. here is the quick Image:</p>
  
  <p><img src="https://i.stack.imgur.com/lFUX6.png" alt="enter image description here">     </p>
  
  <p>You can see I have selected <strong>tab 3</strong> and "<strong>Tab3 item</strong>" is showing it the top. What I am wanting is "Tab item " should remain at the same level with "tab" So here "tab3 item" should in line with "tab3".</p>
  
  <p>I know this is Possible with CSS giving margin top on each of the tab item. But the problem is, there can be 100 of list. And for each of them giving margin can be a pain. </p>
  
  <p>So I was looking for a dynamic solution so that "tab item" follow related tab. Is this possible with jQuery ? I am not very good in jquery and I am looking for help. Any solution will be much appreciated.</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="tab-content"&gt;
      &lt;ul id="tabs"&gt;
                  &lt;li&gt;&lt;a href="#tab1"&gt;tab1&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#tab2"&gt;tab2&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#tab3"&gt;tab3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt; 
  
  &lt;div id="content"&gt;
              &lt;div class="content-item" id="tab1"&gt;tab1 Item&lt;/div&gt;
              &lt;div class="content-item" id="tab2"&gt;tab2 Item&lt;/div&gt;
              &lt;div class="content-item" id="tab3"&gt;tab3 Item&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>JS for tab</strong></p>
  
  <pre><code>$(document).ready(function() {
      $("#content div").hide(); // Initially hide all content
      $("#tabs li:first").attr("id","current"); // Activate first tab
      $("#content div:first").fadeIn(); // Show first tab content
      $('#tabs li a').click(function(e) {
          e.preventDefault();
          if ($(this).attr("id") == "current"){ //detection for current tab
           return       
          }
          else{             
          $("#content div").hide(); //Hide all content
          $("#tabs li").attr("id",""); //Reset id's
          $(this).parent().attr("id","current"); // Activate this
          $( $(this).attr('href')).fadeIn(); // Show content for current tab
          }
      });
  });
  </code></pre>
  
  <p>[Sorry for Bad English :)]</p>