Hola violetabb si quieres hacer esos "efectos" puedes utilizar CSS transition.
Aqui tienes el ejemplo con el efecto desvanecer:
Código:
<head>
<style type="text/css">
[contenido]
{
position:absolute;
left:;
top:;
opacity:0.0;
transition:opacity 0.5s;
-moz-transition:opacity 0.5s;
-webkit-transition:opacity 0.5s;
-o-transition:opacity 0.5s;
}
</style>
<script type="text/javascript">
function expandir(zap) {
if (document.getElementById) {
for (var i=1; ;i++) {
if ("contenido"+i==zap)
{
i++;
}
var cont = document.getElementById("contenido"+i);
if (cont == null)
{
break;
}
cont.style.opacity="0.0";
}
var abra = document.getElementById(zap).style;
if (abra.opacity == "1") {
document.getElementById(zap).style.opacity = "0.0";
} else {
document.getElementById(zap).style.opacity = "1.0";
}
return false
} else {
return true
}
}
</script>
</head>
<ul>
<li><a href="#" onclick="expandir('contenido1');">contenido1</a></li>
<li><a href="#" onclick="expandir('contenido2');">contenido2</a></li>
<li><a href="#" onclick="expandir('contenido3');">contenido 3</a></li>
<li><a href="#" onclick="expandir('contenido4');">contenido 4</a></li>
</ul>
<div id="contenido1" contenido>
contenido 1
</div>
<div id="contenido2" contenido>
contenido 2
</div>
<div id="contenido3" contenido>
contenido 3
</div>
<div id="contenido4" contenido>
contenido 4
</div>
Me parece que no funciona en IE (el efecto) pero no estoy seguro.