...
Geek asks and answers

How to incrementally display div tags

I have a collection of tags divin a tag form, for example:

<form ...>
  <div id="div1"> ... </div>
  <div id="div2"> ... </div>
  ...
  ...
</form>

I want to display only div1in the visible area than when the user clicks next, the next div tag is displayed, i.e. div2, etc.

How can i achieve this?

I have little knowledge of the various approaches available for this, but I have some Javascript knowledge, so any idea would be appreciated.

PS please provide a sample code, if possible, also I want client scripts.

+3
source share
2 answers

javascript html, . . - . . , .

<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";


}
+6

, , , , , .

//add all element IDs to this array
var elements = ["firstElementID","div2","someConentsID","lastElementID"]; 
var currentIndex = 0;

//ensure that the first item is visible at the start.

function next()
{
  //hide current item.
  document.getElementById(elements[currentIndex]).Style = "display:none";
  //move up the current index by one, wrapping so as to stay within array bounds.
  currentIndex = (currentIndex + 1) % elements.length;
  //show the new current item.
  document.getElementById(elements[currentIndex]).Style = "display:inline";
}

show/hide JQuery , .

+1

More articles:


All Articles