Hola:
Para lo que quieres la programación es bastante más compleja, ya que los estilos deberías aplicárselos, por ejemplo, podrías tener un array con los elementos que quieres que se muestren/oculten y un índice de "por donde estamos":
Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>
http://www.caricatos.net/probador
</title>
<style>
#c1, #c2, #c3, #c4 {
display: none;
}
</style>
<script>
var indice = 0;
var capas = ["c1", "c2", "c3", "c4"];
function tag(id) {return document.getElementById(id)};
function mostrar() {
tag(capas[indice++]).style.display = "block";
tag("ampliar").disabled = indice == (capas.length)
tag("encoger").disabled = false;
}
function ocultar() {
tag(capas[--indice]).style.display = "none";
tag("ampliar").disabled = false
tag("encoger").disabled = (indice == 0);
}
</script>
</head>
<body>
<button type="button" id="ampliar" onclick="mostrar()">mostrar</button>
<button type="button" id="encoger" onclick="ocultar()" disabled >ocultar</button>
<div id="c1" >
<p>elemento 1</p>
</div>
<div id="c2" >
<p>elemento 2</p>
</div>
<div id="c3" >
<p>elemento 3</p>
</div>
<div id="c4" >
<p>elemento 4</p>
</div>
</body>
</html>
Saludos
