How to disable tab clicks in spry tabbed panel?

Question

So far I have coding for making the tab's display property to none until the button is clicked. The code is given below.

The problem is only one tab is showing at a time. What I want is, all tabs should be visible but not clickable. Please help me with the code if possible or just give me some suggestions, I will try coding it myself and will post it here as answer.

Thanks!

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 (with this only the first tab is visible and the other tabs are non-visible)

<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: (at button click) (With this the second tab will be visible and the rest 3 tabs will be non-visible)

TabbedPanels1.showPanel(1);

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

Snake Eyes · Accepted Answer · 2012-09-05T09:40:13.960

0

Try this

$('.TabbedPanelsTabGroup').off("click");

or

$('.TabbedPanelsTabGroup li').off("click");

jQuery off().

Let me know if it not works.

UPDATE 1

$('.TabbedPanelsTabGroup li').on("click", function(){
   return false;
});

Or if you are using jquery tab, look: http://jqueryui.com/demos/tabs/#event-select

edited Sep 05 '12 at 09:40

answered Sep 05 '12 at 08:08

Snake Eyes

16,287
34
113
221

I tried both coding in place of '$('.TabbedPanelsTabGroup').children().hide().eq(0).show();' but they didn't work, the tabs are still clickable. Thanks for helping me. – A Mohammed Hussain Sep 05 '12 at 08:56

Gyan Chandra Srivastava · Answer 2 · 2012-09-05T10:32:23.540

0

use this

 $('.TabbedPanelsTabGroup').children().unbind("click");

 $('.TabbedPanelsTabGroup').children().eq(0).bind("click");

instead of doing

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

edited Sep 05 '12 at 10:32

answered Sep 05 '12 at 08:11

Gyan Chandra Srivastava

1,370
9
29

Thanks for helping me. I tried this code but the tabs are still clickable. – A Mohammed Hussain Sep 05 '12 at 08:59

score 0 · Answer 3 · answered Sep 05 '12 at 09:42

Thanks for all the help, I have finally found the answer myself. It is actually quite simple. I just commented Spry.Widget.TabbedPanels.prototype.onTabClick event in the .js file.

/*Spry.Widget.TabbedPanels.prototype.onTabClick = function(e, tab)
{
    this.showPanel(tab);
return this.cancelEvent(e);
};*/

Now the tabs are not clickable and works the way I want it to.

How to disable tab clicks in spry tabbed panel?

3 Answers3