How to disable tab clicks in spry tabbed panel?

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.



<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>

In (with this only the first tab is visible and the other tabs are non-visible)

<script type="text/javascript">

    /*initially hide all tab except tab1*/

    /*show tab2 when click the complete button by hiding all tabs*/
    $('.complete').on('click', function(){

In JS: (at button click) (With this the second tab will be visible and the rest 3 tabs will be non-visible)





Try this



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

jQuery off().

Let me know if it not works.


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

Or if you are using jquery tab, look:


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)
return this.cancelEvent(e);

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


use this



instead of doing



Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.