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

Answer 1

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