jquery tabs - want to use more than once on same page

Question

I used jquery-ui to implement tabs on one page. However, I need to use it more than one time on the same page.

<div id="tabs">
            
                <ul class="top-part">
                    <li><a href="#fragment-1">1</a></li>
                    <li><a href="#fragment-2">2</a></li>
                    <li><a href="#fragment-3">3</a></li>                            
               </ul>
        
                <div id="fragment-1" class="ui-tabs-panel">
                       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>  
                </div>
                
                <div id="fragment-2" class="ui-tabs-panel ui-tabs-hide">
                        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
                
                <div id="fragment-3" class="ui-tabs-panel ui-tabs-hide">
                        <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p>
                </div>      
                            

            </div>

            <br><br>


            <div id="tabs1">
            
                <ul class="top-part">
                    <li><a href="#fragment-1-1">1</a></li>
                    <li><a href="#fragment-2-1">2</a></li>
                    <li><a href="#fragment-3-1">3</a></li>                            
               </ul>
        
                <div id="fragment-1-1" class="ui-tabs-panel">
                       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>  
                </div>
                
                <div id="fragment-2-1" class="ui-tabs-panel ui-tabs-hide">
                        <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                </div>
                
                <div id="fragment-3-1" class="ui-tabs-panel ui-tabs-hide">
                        <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor ultricies tempor quam sit </p>
                </div>     
                            

            </div>

Here is Jquery Code:

<script type="text/javascript">
            jQuery(function() {

                var tabs = jQuery('#tabs').tabs();
        
                jQuery("#tabs .ui-tabs-panel").each(function(i){
        
                  var totalSize = jQuery(".ui-tabs-panel").size() - 1;
        
                  if (i != totalSize) {
                      next = i + 2;
                      jQuery(this).append("<a href='#' class='next-tab mover' rel='" + next + "'>Next Step ></a>");
                  }
          
                  if (i != 0) {
                      prev = i;
                      jQuery(this).append("<a href='#' class='prev-tab mover' rel='" + prev + "'>< Previous Step</a>");
                  }
            
                });
        
                jQuery('.next-tab, .prev-tab').click(function() { 
                       // tabs.tabs('select', jQuery(this).attr("rel"));
                       tabs.tabs("option", "selected", jQuery(this).attr("rel"));
                       return false;
                   });
           

            });
        </script>

        <script type="text/javascript">
            jQuery(function() {

                var tabs1 = jQuery('#tabs1').tabs();
        
                jQuery("#tabs1 .ui-tabs-panel").each(function(i){
        
                  var totalSize = jQuery("#tabs1 .ui-tabs-panel").size() - 1;
        
                  if (i != totalSize) {
                      next1 = i + 2;
                      jQuery(this).append("<a href='#' class='next-tab-1 mover' rel='" + next1 + "'>Next Step ></a>");
                  }
          
                  if (i != 0) {
                      prev1 = i;
                      jQuery(this).append("<a href='#' class='prev-tab-1 mover' rel='" + prev1 + "'>< Previous Step</a>");
                  }
            
                });
        
                jQuery('.next-tab-1, .prev-tab-1').click(function() { 
                       // tabs.tabs('select', jQuery(this).attr("rel"));
                       alert("ddfdf");
                       tabs1.tabs("option", "selected", jQuery(this).attr("rel"));
                       return false;
                   });
           

            });
        </script>

Can anyone help? I tried to assign a different tab name to ID , but it doesn't work that way. I used Jquery UI tabs. I have previous and next button and want that to changes tab's content and want to use multiple tabs on one page.

Here is link with all that code added: Link

Answer 1

The snippet below does what you're looking for.

1. It first generates the tabs.
2. Then it adds Previous and Next anchors to each tab body.
3. Then it attaches a click event to each Previous and Next anchor. The anchors execute previous/next depending on which tabset they're part of and which tab body is active. I.e., the anchors are "aware" of what their previous and next tabs are.

Note that this is setup to "rollover," i.e., when you're on the last tab and click Next, the Next link will rollover to the first tab in the set. The Previous anchor will rollover in similar fashion.

$(function() {
  // generate tabs
  $("#tabs, #tabs1").tabs();

  // add Previous/Next anchors to all tab bodies
  $(".ui-tabs-panel").each(function() {
    let tabsetAnchorId = $(this).parent().attr('id');
    $(this).append(`<a href='#${tabsetAnchorId}' class='prev-tab mover'>&lt; Previous Step</a>`);
    $(this).append(`<a href='#${tabsetAnchorId}' class='next-tab mover' style='float:right;'>Next Step &gt;</a>`);
  });

  // attach click handler for Previous buttons
  $('.prev-tab').click(function() {
    let tabContainer = $(this).parents(".tabset");
    let maxTabNum = $(tabContainer).find("ul >li").length - 1;
    let activeTabNum = $(tabContainer).tabs("option", "active");
    console.log(activeTabNum + " of " + maxTabNum);
    if (activeTabNum <= 0) {
      $(tabContainer).tabs("option", "active", maxTabNum);
    } else {
      $(tabContainer).tabs("option", "active", activeTabNum - 1);
    }
  })

  // attach click handler for Next buttons
  $('.next-tab').click(function() {
    let tabContainer = $(this).parents(".tabset");
    let maxTabNum = $(tabContainer).find("ul >li").length - 1;
    let activeTabNum = $(tabContainer).tabs("option", "active");
    console.log(activeTabNum + " of " + maxTabNum);
    if (activeTabNum >= maxTabNum) {
      $(tabContainer).tabs("option", "active", 0);
    } else {
      $(tabContainer).tabs("option", "active", activeTabNum + 1);
    }
  })
  
  // hide the Previous button on the first tab of each tabset
  $(".tabset").each(function() {
     $(this).find("a.prev-tab").first().hide();
  })
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<div id="tabs" class="tabset">

  <ul>
    <li><a href="#fragment-1">1</a></li>
    <li><a href="#fragment-2">2</a></li>
    <li><a href="#fragment-3">3</a></li>
  </ul>

  <div id="fragment-1">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>

  <div id="fragment-2">
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

  <div id="fragment-3">
    <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor
      ultricies tempor quam sit </p>
  </div>


</div>

<br><br>


<div id="tabs1" class="tabset">

  <ul class="top-part">
    <li><a href="#fragment-1-1">1</a></li>
    <li><a href="#fragment-2-1">2</a></li>
    <li><a href="#fragment-3-1">3</a></li>
  </ul>

  <div id="fragment-1-1" class="ui-tabs-panel">
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
  </div>

  <div id="fragment-2-1" class="ui-tabs-panel ui-tabs-hide">
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop
      publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
  </div>

  <div id="fragment-3-1" class="ui-tabs-panel ui-tabs-hide">
    <p>ante. Mauris Vestibulum est. fames egestas quam, leo. amet tristique sit libero egestas. ultricies mi turpis senectus Pellentesque habitant eu ac morbi netus eget, Aenean malesuada vitae, semper. eleifend et feugiat vitae amet, placerat Donec et tortor
      ultricies tempor quam sit </p>
  </div>


</div>