Next button in tabbed box

Question

I have a tabbed box that I am trying to build a "next" button for to move through each tab. It works except for the active state on the tab buttons do not change when hitting "next". The first tab stays highlighted no matter what tab I'm on. Please see a sample here: http://codepen.io/EBM84/pen/VmjPRQ

Any help is appreciated. Thank you!

<div class="tabs">
  <ul class="tab-links">
    <li class="active"><a href="#tab1">Tab 1</a></li>
    <li><a href="#tab2">Tab 2</a></li>
    <li><a href="#tab3">Tab 3</a></li>
    <li><a href="#tab4">Tab 4</a></li>
  </ul>

  <div class="tab-content">
    <div id="tab1" class="tab active">
      <h4>Tab 1</h4>
      <ul class="tab-links">
        <li class="active">
          <a href="#tab2" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab2" class="tab">
      <h4>Tab 2</h4>
      <ul class="tab-links">
        <li>
          <a href="#tab3" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab3" class="tab">
      <h4>Tab 3</h4>
      <ul class="tab-links">
        <li>
          <a href="#tab4" role="button">next ></a>
        </li>
      </ul>
    </div>

    <div id="tab4" class="tab">
      <h4>Tab 4</h4>
    </div>

  </div>
</div>

score 0 · Answer 1 · answered Nov 14 '16 at 20:20

To get the next tab to highlight, you need this bit of code.

 jQuery('.tab-links a[href="'+ currentAttrValue +'"]').parent('li').addClass('active');

You will still need to get the previous tab to not be "active", but hopefully this gets you going in the right direction.

Adam Kemp · Accepted Answer · 2022-11-11T09:26:17.980

0

To expand on Luke Beckers code - you could remove active classes before:

 $('.tab-links li').removeClass('active');
 $('.tab-links a[href="'+ currentAttrValue +'"]').parent('li').addClass('active');

Hope this helps.

edited Nov 11 '22 at 09:26

answered Nov 14 '16 at 20:44

Adam Kemp

96
4

score 0 · Answer 3 · answered Nov 14 '16 at 21:19

Here's my solution with NEXT and PREV buttons. Hope it helps :).

jQuery(document).ready(function() {
    jQuery('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = jQuery(this).attr('href');
 
        // Show/Hide Tabs
        jQuery('.tabs ' + currentAttrValue).show().siblings().hide();
 
        // Change/remove current tab to active
        jQuery(this).parent('li').addClass('active').siblings().removeClass('active');
 
        e.preventDefault();
    });
   
     
    jQuery('.nextButton').on('click', function() {
        
   var $activeTab = $('.tab-links li.active');
  
  var $wrapper = jQuery(this).closest('.tabs');
   var indexActive = $wrapper.find('li.active').index();
   $wrapper.find('li').eq(indexActive + 1).find('a').click();
});
    
     jQuery('.prevButton').on('click', function() {
        
   var $activeTab = $('.tab-links li.active');
  
  var $wrapper = jQuery(this).closest('.tabs');
   var indexActive = $wrapper.find('li.active').index();
   $wrapper.find('li').eq(indexActive - 1).find('a').click();
});
    
});

.tabs {
    width:100%;
    display:inline-block;
   }

   .tabs h4 {
    color: #00447c;
    margin: 5px 0 15px 0;
    display: inline-block;
   }
 
  .tab-links:after {
    display:block;
    clear:both;
    content:'';
  }

  .tab-links {
    padding: 0;
    margin: 10px 0 0 0;
    position: relative;
    top: 2px;
  }

  .tab-links li {
    margin:0px 5px 0 0;
    float:left;
    padding-top: 2px;
    list-style:none;
  }

  .tab-links a {
    padding:9px 8px 6px;
    display:inline-block;
    background: #c7d8e8;
    border: 2px solid #c7d8e8;
    border-bottom: 3px solid #c7d8e8;
    font-size: 10.5px;
    font-weight:600;
    color:#00447c;
    transition:all linear 0.15s;
  }

  .tab-links a:hover {
    background: #a7cce5;
    text-decoration:none;
    border: 2px solid #a7cce5;
    border-bottom: 3px solid #a7cce5;  
    color: #ee3124;
  }

  li.active a, li.active a:hover {
    background:#fff;
    height: 16px;
    border-bottom: none;
    color: #ee3124;
  }

  .tab-content, .uploaded-documents-container {
    padding:15px;
    border-radius:3px;
    border: 2px solid #c7d8e8;
    background:#fff;
    font-size: .95em;
  }

  .tab-content-scroll {
    max-height: 375px;
    min-height: 375px;
    max-width: 1100px;
    min-width: 450px;
    overflow: auto;
    clear:both;
  }

  .tab-content-scroll-home {
    min-height: 135px;
  }

  .button-bar-scroll {
    min-height: 235px;
  }

  .tab-content-scroll>p {
    margin-top: 0;
    padding-right: 12px;
  }

  .tab-content a {
    margin-top: 10px;
    color: #00447c;
  }

  .tab {
    display:none;
  }

  .tab.active {
    display:block;
  }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<body>
  <div class="tabs">
    <ul class="tab-links">
        <li class="active"><a href="#tab1">Tab #1</a></li>
        <li><a href="#tab2">Tab #2</a></li>
        <li><a href="#tab3">Tab #3</a></li>
        <li><a href="#tab4">Tab #4</a></li>
    </ul>
 
    <div class="tab-content">
        <div id="tab1" class="tab active">
           <h4>Tab 1</h4>
          <ul class="tab-links">
         <li>
    <a href="#next_tab2" class="nextButton">Next</a>
  </li>
 </ul>
        </div>
 
        <div id="tab2" class="tab">
        <h4>Tab 2</h4>
        <ul class="tab-links">
        <li>
          <a href="#back_tab1" class="prevButton">Prev</a>
    <a href="#next_tab2" class="nextButton">Next</a>
  </li>
 </ul>
        </div>
 
        <div id="tab3" class="tab">
        <h4>Tab 3</h4>
        <ul class="tab-links">
         <li>
          <a href="#back_tab1" class="prevButton">Prev</a>
    <a href="#next_tab2" class="nextButton">Next</a>
  </li>
 </ul>
        </div>
 
        <div id="tab4" class="tab">
         <h4>Tab 4</h4>
         <ul class="tab-links">
         <li>
          <a href="#back_tab1" class="prevButton">Prev</a>
      </li>
  </ul>
        </div>
    </div>
</div>

Next button in tabbed box

3 Answers3