Understanding the functionality of your code is crucial...
It seems that the jQuery component is applying the class hide to certain list items for hiding and removing it from others to display them.
1] Initially, all buttons are visible because none of the items have the hide class applied to them. To fix this, either add the attribute class="hide" to all list items in HTML or create a JavaScript function to run on page load.
2] To address the inconsistent behavior of the left & right buttons, compare the jQuery functions as they are not performing identical operations. Align the left button's operation with the right one for consistency.
For the right button:
arrowRightCount = arrowRightCount + 3;
arrowLeftCount = arrowLeftCount - 3;
For the left button:
arrowLeftCount = arrowLeftCount - 3;
arrowRightCount = arrowRightCount - 3;
3] If you intend to display only one button, adjust the value from 3 to 1 in the jQuery script to ensure only one button is displayed.
Tip: Use distinct names for buttons to easily identify which button is currently displayed and its sequence.
Update: Although not extensively familiar with jQuery, the code can be simplified.
Review the updated jQuery, where the specific list items are targeted for adding/removing classes instead of all items. The modification now applies actions only to the prev/next elements based on the counter (cntr) to determine the current position.
Refer to this jsfiddle link for the output.
var mincount = 0;
var maxcount = 10;
var cntr = 0;
$(document).ready(function() {
// RIGHT ARROW
$(".step-box .arrow-right").click(function(e) {
if(cntr >= mincount && cntr < maxcount){
$("#mines > li:eq(" + cntr + ")").addClass('hide');
cntr = cntr + 1;
$("#mines > li:eq(" + cntr + ")").removeClass('hide');
}
});
// LEFT ARROW
$(".step-box .arrow-left").click(function(e) {
if(cntr > mincount && cntr <= maxcount){
$("#mines > li:eq(" + cntr + ")").addClass('hide');
cntr = cntr - 1;
$("#mines > li:eq(" + cntr + ")").removeClass('hide');
}
});
});