Agregar el siguiente script entre las etiquetas <head>y </head>
<script>
//<![CDATA[
var abierto = "primero"; // definimos el que estará abierto
function demoacordeon(cual) {
var mostrar = document.getElementById(cual); // el que vamos a mostrar
var actual = document.getElementById(abierto); // el que vamos a ocultar
if(mostrar==actual) {return false;} // si es el mismo no hacemos nada
// permutamos sus clases
actual.className="novisible";
mostrar.className="visible";
abierto = cual; // guardamos el que está abierto
}
//]]>
</script>
el stylo
#demoA {
margin: 0 auto;
width: 100%;
}
#demoA a {
background-color: #123;
display: block;
font-size: 16px;
line-height: 2em;
margin: 1px 0;
padding-left: 5px;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
text-decoration: none;
font-size: 12px;
}
#demoA a:hover {
background-image: url(vagaPlantilla_bgGradienteVertical.gif);
color: #EEE;
}
#demoA div {
background-image: url(vbblog_sidebar_background.png);
overflow:hidden;
text-align: center;
-moz-transition: all 1s ease-in-out;
-webkit-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#demoA div.visible {
border: 1px solid #123;
height:100px;
color: #fff;
}
#demoA div.novisible {
border: 1px solid transparent;
height:0px;
}
y el html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="demoA">
<a onclick="demoacordeon('primero');" href="javascript:void(0);">Seguidores</a>
<div id="primero" class="visible">
<img src="XP.png" width="120">
</div>
<a onclick="demoacordeon('segundo');" href="javascript:void(0);">Programadores</a>
<div class="novisible" id="segundo">
NickJP XD.<br>
</div>
<a onclick="demoacordeon('tercero');" href="javascript:void(0);">contactos</a>
<div id="tercero" class="novisible">
<span>[email protected] </span>
</div>
</div>
</body>
</html>
Demo: http://mydising.site90.com/arconick.html