how to hide buttons

Hi Ashish,

One way you can do it is to check in each of your click handlers whether the current li is the first or last one and then show/hide the appropriate buttons.

Here's some code for the li click handler to get you started:

$("#light_box li").click(function(){
  //assigning variable to current
  current = $(this);
  // code to add
  current.is(":first-child") ? prev.hide() : prev.show();
  current.is(":last-child") ? next.hide() : next.show();

Here's the mdn page for the ternary operator if you're not familiar with it: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

The first one is basically a shortcut for this:

if (current.is(":first-child")) {
  prev.hide();
} else {
  prev.show();
}

You'll need similar code for both the next and previous handlers. Place the code after you've assigned a new value to current like I did with the li click handler. The difference is that you don't have to do both checks.

In the case of the prev button being clicked, you only need to check if the new current item is the first-child. There's no need to check if it's the last-child.

Same with next button. only check if the new current item is the last-child.