how to disable tabs in spry tabbed panel

Question

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.

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&4) to be disabled. Please tell me how to do this.

I did a lot of research but all I could find is jquery tabs, I can't find solution for spry tabbed panels.

Thanks!

Edit.............

The result doesn't exactly shows a tab panel. But I hope it is enough to view the coding.

http://jsfiddle.net/AU9D9/

Edit............ Found the Answer:

In

<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
    </ul>

In

<script type="text/javascript">
$(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();
    });
});
</script>

In JS:

TabbedPanels1.showPanel(1);

$('.TabbedPanelsTabGroup').children().hide().eq(1).show();

give the code you try in jsfiddle – Codegiant Sep 03 '12 at 08:27 — Codegiant, Sep 03 '12 at 08:27

score 1 · Accepted Answer · answered Sep 03 '12 at 14:18

just modify the area that i change

HTML

<div id="TabbedPanels1" class="TabbedPanels">
  <ul class="TabbedPanelsTabGroup">
    <li class="TabbedPanelsTab" id="tab1">Tab 1</li>
    <li class="TabbedPanelsTab" id="tab2">Tab 2</li>
    <li class="TabbedPanelsTab" id="tab3">Tab 3</li>
  </ul>
  <div class="TabbedPanelsContentGroup">
    <div class="TabbedPanelsContent">Content 1</div>
    <div class="TabbedPanelsContent">Content 2</div>
    <div class="TabbedPanelsContent">Content 2</div>
  </div>
  <input type="submit" value="complete" class="complete">  
</div>

JS CODE

$(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();
    });
});

I added few lines of code to your answer and it worked great. Thanks a lot. — A Mohammed Hussain, Sep 04 '12 at 02:52

score 0 · Answer 2 · answered Sep 04 '12 at 02:53

Found the Answer:

In

<div id="TabbedPanels1" class="TabbedPanels">
    <ul class="TabbedPanelsTabGroup">
      <li class="TabbedPanelsTab" tabindex="-1" id="tab1"><b>BOOKING</b></li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab2" style="">QUOTE</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab3">SIGNUP</li>
      <li class="TabbedPanelsTab" tabindex="-1" id="tab4">PAYMENT</li>
    </ul>

In

<script type="text/javascript">
$(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();
    });
});
</script>

In JS:

TabbedPanels1.showPanel(1);

$('.TabbedPanelsTabGroup').children().hide().eq(1).show();

how to disable tabs in spry tabbed panel

2 Answers2