How to incrementally reveal div tags

asp.net, c#, c#-4.0

Solution

Here's some javascript and html demonstration that may help. Increment a current integer. You could deincrement with -- for back as well. There are many ways to do this. This is just one I thought of.

<img src="mynextbutton.jpg" onclick="showNext()" />
<form ...>
  <div id="Div0" style="display:inherit;"> ... </div>
  <div id="Div1" style="display:none;"> ... </div>
  <div id="Div2" style="display:none;"> ... </div>
  ...
  ...
</form>

//---------------------------------------------------

var currentDiv = 0;
function showNext()
{
     document.getElementById("Div"+currentDiv).style.display = "none";
     currentDiv ++;
     document.getElementById("Div"+currentDiv).style.display = "ihherit";


}

Problem

I have collection of `div` tags in the `form` tag, like this: ``` <form ...> <div id="div1"> ... </div> <div id="div2"> ... </div> ... ... </form> ``` I want to display only `div1` in the visible area than when user presses `next`, the next div tag i.e. `div2` is displayed, and so on. How can I achieve this? I don't have much knowledge about different approaches available to do this, but I have some knowledge of Javascript, so any idea will be appreciated. P.S. please provide sample code if possible, also I want client-side scripting.

Original source