È una roba da farsi in JavaScript. Non sono molto al corrente di tutte le nuove potenzialità di CSS di recente introduzione, e neanche i browser meno recenti lo sono; ma credo che così sia, amen, via con una base di partenza così ci studi un po'.
codice:
<head>
<script language="javascript" >

var attuale = 1;

function avanza(){

  document.getElementById("div" + attuale).style.display="none";

  prossimo = attuale + 1;
  document.getElementById("div" + prossimo).style.display="";

  attuale = prossimo;

  }
</script>

<style>
div {border: 1px dashed gray; padding: 4px; width: 30%; margin: auto}
</style>

</head>
<body bgcolor="#DDD">
<h2 align="center"><a href="javascript: arretra()">&lt;</a>&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript: avanza()">&gt;</a></h2>

<div id="div1">Primo Capitolo</div>
<div id="div2" style="display: none"><img src=""> II° Capitolo</div>
<div id="div3" style="display: none"><input> III° contenuto</div>
<div id="div4" style="display: none"><br>in parole povere, questo è il DIV con ID="div4"</div>
<div id="div5" style="display: none">e questo è l' ultimo: ora bisognerebbe che al click su &gt; "avanti", si torni al primo DIV, o che 
                                     esso link per l' avanzamento si disabiliti/sparisca (e allora si potrà solo tornare indietro con l' altro). <br>
                                     Al momento, un prossimo click su &gt; mette in <tt>display: none</tt> questo DIV ma poi la<tt> function </tt> 
                                     va a cercare il prossimo con <tt>id="div6"</tt> ("div" + 5 +1), che però non esiste nel Documento. <br>
                                     <br>Il segno + in javascript funge sia da operatore numerico, che da concatenatore.</div>
altre componenti statiche della pagina ...
</body>