jQuery add class name or ID +1 and -1

Question

As you can read in the title, it's about any class or ID to increase by 1. For example: I have 3 IDs they calles id1, id2 and id3. id1 is visible but the other two are hidden. So now I want by clicking on a button that id1 is no longer visible, but is visible for id2. After clicking on next when the last id is visible it have to turn back to first. And I want also by clicking on another button for example that id2 is not longer visible, but visible for id1 again.

My current jQuery code:

$(document).ready(function() {
    var size_ini = 1;
    var size_increase = size_ini++;        
    $("#next").click(function() {
        $("#id" + size_increase).css("display", "block");
    });
});

My HTML code:

<div>
    <p id="id1">first</p>
    <p id="id2" style="display: none;">second</p>
    <p id="id3" style="display: none;">third</p>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

So my question is, what do i wrong or what have i to do else to do it right.

Answer 1

jsfiddle: http://jsfiddle.net/jLm7Q/1/

you should define size_ini globally. and use a class for all objects so you can hide them together. also you can use show/hide methods instead of changing css. this one also goes to 1 after 3 and 3 after 1. and this will do it every 10 seconds. js code:

var size_ini = 1;
$(document).ready(function() { 
    var myVar = setInterval('$("#next").click()',10000)  
    $("#next").click(function() {
        clearInterval(myVar);
        setInterval('$("#next").click()',10000)  
        if(size_ini < 3)
        size_ini++;
        else
        size_ini = 1
        $(".sample").hide();
        $("#id" + size_ini).show();
    });
    $("#prev").click(function() {
        clearInterval(myVar);
        setInterval('$("#prev").click()',10000)      
        if(size_ini > 1)
        size_ini--;
        else        
        size_ini = 3;
        $(".sample").hide();
        $("#id" + size_ini).show();
    });    
});

and the html:

<div>
    <p class='sample' id="id1">first</p>
    <p class='sample' id="id2" style="display: none;">second</p>
    <p class='sample' id="id3" style="display: none;">third</p>
</div>
<button id="prev">prev</button>
<button id="next">next</button>

Answer 2

$(document).ready(function() {
    setInterval('$("#next").click()', 10000);
    var size = 1;
    $("#next").click(function() {
        $("#id" + size).hide();
        if(size === 3) {
            size = 1;
        }
        else {
            size++;
        }
        $("#id" + size).show();
    });
    $("#prev").click(function() {
        $("#id" + size).hide();
        if(size === 1) {
            size = 3;
        }
        else {
            size--;
        }
        $("#id" + size).show();
    });
});