hide div, show another... then hide, show another on mouse click
<p>I'm trying to have a div hide and then show the next div when the image in the div is clicked. When it is clicked again, hide that div and load the next one, etc.</p>

<p>The below works, but realize it's not pretty. What's the better way to do this, and without using inline javascript?</p>

<p>I'm also trying to add a "next" button that will hide the div and show the next dive... so the user can load the next item without clicking the <code>a href</code> in the div.</p>

<p>Thanks!</p>

<pre><code>function replace( hide, show ) {
  document.getElementById(hide).style.display="none";
  document.getElementById(show).style.display="block";
}
</code></pre>

<p>Body...</p>

<pre><code>&lt;div id = "div1" style="display:block" onclick = "replace('div1','div2')"&gt;&lt;a href="link1.html" target="_blank"&gt;&lt;img src="images/a.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div id = "div2" style="display:none" onclick = "replace('div2','div3')"&gt;&lt;a href="link2.html" target="_blank"&gt;&lt;img src="images/b.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div id = "div3" style="display:none" onclick = "replace('div3','div4')"&gt;&lt;a href="link3.html" target="_blank"&gt;&lt;img src="images/c.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
&lt;div id = "div3" style="display:none" onclick = "replace('div4','div5')"&gt;&lt;a href="link4.html" target="_blank"&gt;&lt;img src="images/.jpg"&gt;&lt;/a&gt;&lt;/div&gt;
...
</code></pre>
