how to show and hide multiple divs using next and pre btn ?

Question

Hi Frnds

i Have main div with label1..inside that i have 3 divs..

with next and previous with submit button ..

now i want if i click on label1 all div should be hide but first div should be open..

then if i click on nect button then 2 nd div ill be open..again same thing happen for the all divs..

i want to use java script or jquery

anyone can me suggest how to do it?

Manas Mohapatra · Answer

Try with below code: div id = "label1" > span id = "spnEmp" > Employee Info span > div id = "div1" > Add your content Div1 div > div id = "div2" > Add your content DIV2 div > div id = "div3" > Add your content DIV3 input type = "button" value = "submit" /> div > div > a id = "next" > next a > a id = "prev" > prev a > jQuery code: $(document).ready( function (){ // Hide all div $( "#div2" ).hide(); $( "#div3" ).hide(); $( "#div1" ).hide(); $( "#next" ).hide(); $( "#prev" ).hide(); // Hide all div $( "#spnEmp" ).click( function (){ $( "#div1" ).show(); $( "#next" ).show(); $( "#prev" ).show(); }); $( "#next" ).click( function (){ if ($( "#label1 div:visible" ).next().length != 0) $( "#label1 div:visible" ).next().show().prev().hide(); else { $( "#label1 div:visible" ).hide(); $( "#label1 div:first" ).show(); } return false ; }); $( "#prev" ).click( function (){ if ($( "#label1 div:visible" ).prev().length != 0) $( "#label1 div:visible" ).prev().show().next().hide(); else { $( "#label1 div:visible" ).hide(); $( "#label1 div:last" ).show(); } return false ; }); });

Manas Mohapatra · Answer

You need to change the logic if you want to see only "Next" button when first DIV clicked.

Anjali Khan · Answer

hi Manhas thanks for the update.. here next button is showing for the last div means there should be show only previous and submit button.. same thing if I click on first div using the next button after that if I will come on 1 div there also showing pre button ...

Anjali Khan · Answer

hi Frnds thanks for the update,, manhas your code also working is fine but in that you gave the span id but there want label like details ,organization ,process so in that firstly show the details with one dive data and another both label should be disable and if I click on next button then organization data should be open same think apply to remaining.. and here not clickable lable only able or disiable..

Vinay Singh · Answer

Hi Try the Accrodian menu for this http://jsfiddle.net/4SVXt/23/

Midhun Tp · Answer

Hi, I have attached one file. Please check if that is how you required.

Anjali Khan · Answer

no..logic should be same...