title: jQuery tabs - Enable and disable
body: <p>I'm having a problem on how to disable tab 3 when the first button is clicked. When I click <code>Activate 2nd tab</code>, the 2nd tab will be enabled, but the 3rd tab will be enabled, too; it should be enabled when I click <code>Activate 3rd tab</code>.</p>
  
  <p>What should I do?</p>
  
  <pre><code>&lt;div class="tab-wrapper" id="tab-wrapper"&gt;
    &lt;div class="tab-header"&gt;
      &lt;ul class="tabs"&gt;
        &lt;li&gt;&lt;a href="#tab1"&gt;Step 1&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab2"&gt;Step 2&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#tab3"&gt;Step 3&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
    &lt;div class="tab_container"&gt;
      &lt;div id="tab1" class="tab_content"&gt;
        this is tab 1
        &lt;button id="button2"&gt;Activate 2nd tab&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="tab2" class="tab_content"&gt;
        this is tab 2
        &lt;button id="button3"&gt;Activate 3rd tab&lt;/button&gt;
      &lt;/div&gt;
  
      &lt;div id="tab3" class="tab_content"&gt;
        This is tab3
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  
  &lt;script type="text/javascript"&gt;
  
    $(function() {
  
      var activate = false,
      tabLinks = $('.tabs a'),
      tabContent = $('.tab_container').children();
  
      tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
      $('#tab2').hide();
      $('#tab3').hide(); // Hide second tab
  
  
      tabLinks.bind('click', function(e) {
        e.preventDefault();
        if(activate === true) { // Only do something if button has been clicked
          var target = this.hash,
            el = $(this);
  
          tabLinks.filter('.active').removeClass('active');
          el.addClass('active');
  
          tabContent.hide(); // Hide all
          $(target).show(); // Show selected
        }
      });
  
      $('#button2').bind('click', function() {
        activate = true; // Activate tab functionality
        tabLinks.eq(1).trigger('click'); // Trigger a click on the second tab link
      });
  
      $('#button3').bind('click', function() {
        activate = true; // Activate tab functionality
        tabLinks.eq(2).trigger('click'); // Trigger a click on the third tab link
      });
  
    });
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>