Tabs, Hide Previous on first tab and next on last

Question

I'm having trouble getting the next and previous buttons hiding and showing when it's on the first or last page. I've looked into different methods, but haven't gotten any to work as of yet with the newest libraries.

Is it possible to use first and last method to do this?

Hints will gladly be accepted!

$(document).ready(function() {
  $("#tabs").tabs();

  $(".btnNext").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active + 1);
  });


  $(".btnPrev").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active - 1);
  });

  var active = $("#tabs").tabs("option", "active");
  if (active == 0) {
    $(".btnPrev").hide();
  } else {
    $(".btnPrev").show();
  };

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<div id="tabs">
  <ul>
    <li><a href="#fragment-1" class="firstTab"><span>One</span></a>
    </li>
    <li><a href="#fragment-2"><span>Two</span></a>
    </li>
    <li><a href="#fragment-3" class="lastTab"><span>Three</span></a>
    </li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
<button class="btnPrev">Prev</button>
<button class="btnNext">Next</button>

Answer 1

You need to check the active on each replacement tab.

So, I moved the check to separate function (resetButtons) and run it at the start, and after each click.

Also. I finished the check - You missed the check if the user in the last tab.

Update

You don't need to call the function manually, just pass the resetButtons function as activate and create params. In this case the resetButtons will run if the user clicks on the tabs too (not only on the buttons)

$(document).ready(function() {
  $("#tabs").tabs({
    activate: resetButtons,
    create: resetButtons
  });
  // resetButtons();
  
  $(".btnNext").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active + 1);
    // resetButtons();
  });


  $(".btnPrev").click(function() {
    var active = $("#tabs").tabs("option", "active");
    $("#tabs").tabs("option", "active", active - 1);
    // resetButtons();
  });

});

function resetButtons() {
  var active = $("#tabs").tabs("option", "active");
  var tabsLength = $("#tabs li").length;
  if (active == 0) {
    $(".btnPrev").hide();
  } else {
    $(".btnPrev").show();
  };  
  
  if (active == (tabsLength - 1)) {
    $(".btnNext").hide();
  } else {
    $(".btnNext").show();
  };  
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" rel="stylesheet" />
<div id="tabs">
  <ul>
    <li><a href="#fragment-1" class="firstTab"><span>One</span></a>
    </li>
    <li><a href="#fragment-2"><span>Two</span></a>
    </li>
    <li><a href="#fragment-3" class="lastTab"><span>Three</span></a>
    </li>
  </ul>
  <div id="fragment-1">
    <p>First tab is active by default:</p>
    <pre><code>$( "#tabs" ).tabs(); </code></pre>
  </div>
  <div id="fragment-2">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat.
  </div>
  <div id="fragment-3">
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet
    dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
  </div>
</div>
<button class="btnPrev">Prev</button>
<button class="btnNext">Next</button>