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

Anjali Khan

10y901.NET

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?

7 Replies

Know the answer? Post it — somebody with the same question will find it here.

Manas Mohapatra10y ago
Accepted answer
Try with below code:
<div id="label1">
    <span id="spnEmp">Employee Infospan>
    <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">nexta>
<a id="prev">preva>
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;
    });
});
Anjali Khan10y ago
no..logic should be same...
Manas Mohapatra10y ago
You need to change the logic if you want to see only "Next" button when first DIV clicked.
Anjali Khan10y ago
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 Khan10y ago
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 Singh10y ago
Hi
Try the Accrodian menu for this
http://jsfiddle.net/4SVXt/23/
Midhun Tp10y ago
Hi,
I have attached one file. Please check if that is how you required.