CODEWITHSUNDEEP
javascriptjqueryhtml
O Connor
O Connor

Reputation: 4392

How to show the very next div on button click with jQuery?

Below are my elements.

<div class="first-div">
   DIV 1
   <button class="next">Next</button>
</div>
<div class="next-div" style="display:none;">
   DIV 2
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
<div class="next-div" style="display:none;">
   DIV 3
   <button class="back">Back</button>
   <button class="next">Next</button>
</div>
<div class="next-div" style="display:none;">
   DIV 4
   <button class="back">Back</button>
</div>

How can I select the very next hidden .next-div element and show it and select the very previous hidden element and show it using jQuery?

Upvotes: 2

Views: 10091

Answers (1)

Milind Anantwar
Milind Anantwar

Reputation: 82241

You can use:

$('.next').click(function(){
   $(this).parent().hide().next().show();//hide parent and show next
});

$('.back').click(function(){
   $(this).parent().hide().prev().show();//hide parent and show previous
});

Working Demo

Upvotes: 7

Related Questions