CODEWITHSUNDEEP
javascriptjqueryhtml
Power
Power

Reputation: 11

hide many button with next and preview button

I have ten buttons with a button for next and previous, when I click the next button, it should show the next two buttons (hiding the rest). The reverse should happen when the previous button is clicked (Show the previous two buttons (hide the rest)).

thanks.

my html code is :

<div>
<button class="menu">M1</button>
<button class="menu">M2</button>
<button class="menu">M3</button>
<button class="menu">M4</button>
<button class="menu">M5</button>
<button class="menu">M6</button>
<button class="menu">M7</button>
<button class="menu">M8</button>
<button class="menu">M9</button>
<button class="menu">M10</button>
</div>
<div>
<button class="action" id="btnNext">Next</button>
<button class="action" id="btnPreview">Previous</button>
</div>

Upvotes: 1

Views: 59

Answers (2)

Sudharsan S
Sudharsan S

Reputation: 15403

I manually coded not tested please check 

$("button.menu").not(':eq(0),:eq(1)').hide();
var count = 1;
$("#btnNext").click(function() {
       $("button.menu").hide();
       count = count + 2;
       $("button.menu").eq(count-1).show();
       $("button.menu").eq(count).show();
});

$("#btnPreview").click(function() {
       $("button.menu").hide();
       count = count - 2;
       $("button.menu").eq(count-1).show();
       $("button.menu").eq(count).show();
});

Upvotes: 1

Tino M Thomas
Tino M Thomas

Reputation: 1746

Initially make every button hidden except first two.

$("#btnNext").on('click', function(){
    var vBtn = $(".menu:visible:last");
    $(".menu").hide();
    vBtn.next().show();
    vBtn.next().next().show();
});

$("#btnPreview").on('click', function(){
    var vBtn = $(".menu:visible:first");
    $(".menu").hide();
    vBtn.prev().show();
    vBtn.prev().prev().show();
});

Upvotes: 1

Related Questions