title: how to disable tabs in spry tabbed panel
body: <p>I am using spry tabbed panel in dreamweaver. I am using the tabs as steps, for instance when the user completes the process in tab 1 and click complete button, tab 2 will open. Everything works fine till this step. </p>
  
  <p>Now I want to disable the tabs, for instance when the user is present in tab 1 I want the future tabs (tab 2,3&amp;4) to be disabled. Please tell me how to do this. </p>
  
  <p>I did a lot of research but all I could find is jquery tabs, I can't find solution for spry tabbed panels. </p>
  
  <p>Thanks!</p>
  
  <p>Edit.............</p>
  
  <p>The result doesn't exactly shows a tab panel. But I hope it is enough to view the coding. </p>
  
  <p><a href="http://jsfiddle.net/AU9D9/" rel="nofollow">http://jsfiddle.net/AU9D9/</a></p>
  
  <p>Edit............ Found the Answer:</p>
  
  <p>In </p>
  
  <pre><code>&lt;div id="TabbedPanels1" class="TabbedPanels"&gt;
      &lt;ul class="TabbedPanelsTabGroup"&gt;
        &lt;li class="TabbedPanelsTab" tabindex="-1" id="tab1"&gt;&lt;b&gt;BOOKING&lt;/b&gt;&lt;/li&gt;
        &lt;li class="TabbedPanelsTab" tabindex="-1" id="tab2" style=""&gt;QUOTE&lt;/li&gt;
        &lt;li class="TabbedPanelsTab" tabindex="-1" id="tab3"&gt;SIGNUP&lt;/li&gt;
        &lt;li class="TabbedPanelsTab" tabindex="-1" id="tab4"&gt;PAYMENT&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>In </p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $(document).ready(function(){
  
      /*initially hide all tab except tab1*/
      $('.TabbedPanelsTabGroup').children().hide().eq(0).show();
  
      /*show tab2 when click the complete button by hiding all tabs*/
      $('.complete').on('click', function(){
           $('#tab2').siblings().slideUp();
          $('#tab2').slideDown();
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>In JS:</p>
  
  <pre><code>TabbedPanels1.showPanel(1);
  
  $('.TabbedPanelsTabGroup').children().hide().eq(1).show();
  </code></pre>