CODEWITHSUNDEEP
javascriptjqueryhtmljquery-ui-tabs
Seulgi Bear
Seulgi Bear

Reputation: 73

jQuery tabs - Enable and disable

I'm having a problem on how to disable tab 3 when the first button is clicked. When I click Activate 2nd tab, the 2nd tab will be enabled, but the 3rd tab will be enabled, too; it should be enabled when I click Activate 3rd tab.

What should I do?

<div class="tab-wrapper" id="tab-wrapper">
  <div class="tab-header">
    <ul class="tabs">
      <li><a href="#tab1">Step 1</a></li>
      <li><a href="#tab2">Step 2</a></li>
      <li><a href="#tab3">Step 3</a></li>
    </ul>
  </div>
  <div class="tab_container">
    <div id="tab1" class="tab_content">
      this is tab 1
      <button id="button2">Activate 2nd tab</button>
    </div>
    <div id="tab2" class="tab_content">
      this is tab 2
      <button id="button3">Activate 3rd tab</button>
    </div>

    <div id="tab3" class="tab_content">
      This is tab3

    </div>
  </div>
</div>

</body>

<script type="text/javascript">

  $(function() {

    var activate = false,
    tabLinks = $('.tabs a'),
    tabContent = $('.tab_container').children();

    tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
    $('#tab2').hide();
    $('#tab3').hide(); // Hide second tab


    tabLinks.bind('click', function(e) {
      e.preventDefault();
      if(activate === true) { // Only do something if button has been clicked
        var target = this.hash,
          el = $(this);

        tabLinks.filter('.active').removeClass('active');
        el.addClass('active');

        tabContent.hide(); // Hide all
        $(target).show(); // Show selected
      }
    });

    $('#button2').bind('click', function() {
      activate = true; // Activate tab functionality
      tabLinks.eq(1).trigger('click'); // Trigger a click on the second tab link
    });

    $('#button3').bind('click', function() {
      activate = true; // Activate tab functionality
      tabLinks.eq(2).trigger('click'); // Trigger a click on the third tab link
    });

  });
</script>
</html>

Upvotes: 4

Views: 7994

Answers (1)

Quentin Roger
Quentin Roger

Reputation: 6538

You can do something like this (using an array to know if the tab is already activated instead of only one boolean): 

$(function() {


  var activate = [true, false, false],
    tabLinks = $('.tabs a'),
    tabContent = $('.tab_container').children();

  tabLinks.eq(0).addClass('active'); // Add active class, could possibly go in markup
  $('#tab2').hide(); // Hide second tab
  $('#tab3').hide(); // Hide second tab

  tabLinks.on('click', function(e) {
    e.preventDefault();
    var idx = $(this).data('index');
    if (activate[idx] === true) { // Only do something if button has been clicked
      var target = this.hash,
        el = $(this);

      tabLinks.filter('.active').removeClass('active');
      el.addClass('active');

      tabContent.hide(); // Hide all
      $(target).show(); // Show selected
    }
  });

  $('button').on('click', function() {
    var index = $(this).data('index');
    activate[index] = true; // Activate tab functionality
    tabLinks.eq(index).trigger('click'); // Trigger a click on the second tab link
  });

});
 * {
   padding: 0;
   margin: 0;
 }
 
 body {
   margin: 30px;
 }
 
 .tab-wrapper {
   width: 500px;
 }
 
 .tabs {
   overflow: hidden;
   list-style: none;
 }
 
 .tabs li {
   float: left;
   margin-right: 10px;
   border: 1px solid #ccc;
   border-bottom: 0;
 }
 
 .tabs a {
   display: block;
   padding: 5px;
   width: 100px;
 }
 
 .tabs a.active {
   background: #efefef;
 }
 
 .tab_container > div {
   padding: 10px;
   border: 1px solid #ccc;
 }
 
 button {
   padding: 5px;
 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>

  <div class="tab-wrapper" id="tab-wrapper">
    <div class="tab-header">
      <ul class="tabs">
        <li><a href="#tab1" data-index="0">step1</a></li>
        <li><a href="#tab2" data-index="1">step2</a></li>
        <li><a href="#tab3" data-index="2">step3</a></li>
      </ul>
    </div>
    <div class="tab_container">
      <div id="tab1" class="tab_content">
        here is the list of the overview
        <button data-index="1">Activate 2nd tab</button>
      </div>
      <div id="tab2" class="tab_content">
        here is the list of the overview
        <button data-index="2">Activate 3nd tab</button>
      </div>
      <div id="tab3" class="tab_content">
        End
      </div>

    </div>
  </div>

</body>

You can find the code on jsfiddle too :

https://jsfiddle.net/psLshz3u/

Upvotes: 3

Related Questions