Home/ Questions/Q 7968995
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-04T07:09:58+00:00

I can’t seem to figure out how to simply hide the prev button when

  • 0

I can’t seem to figure out how to simply hide the “prev” button when I’m on the first div and hide the “next” button when I’m on the last div.

Hoping there’s a pro out there who’d like to help a newb. Here’s my code:

<!DOCTYPE html>
<html>
<head>
  <style>
      div { width:40px; height:40px; margin:10px; float:left; border:2px blue solid; padding:2px; }
      span { font-size:14px; }
      p { clear:left; margin:10px; }
  </style>
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <div></div>
  <div></div>
  <div></div>
  <div id="start"></div>
  <div></div>
  <p><button id="prev">Prev</button></p>
  <p><button id="next">Next</button></p>
    <script type="text/javascript">
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#prev").click(function () {
            $curr = $curr.prev();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
        var $curr = $("#start");
        $curr.css("background", "#f99");
        $("#next").click(function () {
            $curr = $curr.next();
            $("div").css("background", "");
            $curr.css("background", "#f99");
        });
    </script>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team
    var $curr = $("#start");
$curr.css("background", "#f99");
$("#prev").click(function () {
    $("#next").show();
    $curr = $curr.prev('div');
    $("div").css("background", "");
    $curr.css("background", "#f99");
    if (!$curr.prev('div').length) $(this).hide();
 });
 $("#next").click(function () {
    $("#prev").show();
    $curr = $curr.next('div');
    $("div").css("background", "");
    $curr.css("background", "#f99");
    if (!$curr.next('div').length) $(this).hide();
 });

    FIDDLE

    • 0