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

@xr00tme: Yeah. I am able to add those buttons using Jquery code. Only issue that second tab is not working. First one is working fine. Here is link with all that code added: logistics-coordinators.com/next-prev — Nik
– Nik, Commented Nov 16, 2020 at 20:34
Your code snippets aren't working. Can you please consolidate them into something that mostly works? — Marc
– Marc, Commented Nov 16, 2020 at 21:25

Marc · Accepted Answer · 2020-11-16 22:54:55Z

The snippet below does what you're looking for.

It first generates the tabs.
Then it adds Previous and Next anchors to each tab body.
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>

Thanks for help. What Can I make change to code to remove "previous" button initially ? like I don't want to display "previous" when user visit the page first time.
I made an update to my post that hides the Previous button on the first tab of each tabset. It's better to not create it in the first place, but since you asked how to hide it, that's the code I added. If this solution works for you, please accept the answer.

Collectives™ on Stack Overflow

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

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related