expander y contraer contenido con javascript

violetabb · #1 (**permalink**) 30/08/2012, 23:09

Hola que tal?
estoy haciendo un menu con diferentes items donde al hacer click en cada uno se muestra un contenido.funciona bien peroo:
1) el problema es cuando hago click en la 2da opcion me sigue mostrando el primero
2)La idea es que al hacer click en cualquiera de las opciones solo muestre el que corresponde al click y se borre el anterior.
Mi codigo es este.

Código:

<head>

<style type="text/css">
#contenido1{
  		display: none;
  	}
#contenido2{
  		display: none;
  	}
#contenido3{
  		display: none;
  	}
#contenido4{
  		display: none;
  	}
</style>

<script type="text/javascript">
  	
  		function expandir(zap) {
			if (document.getElementById) {
				var abra = document.getElementById(zap).style;
				if (abra.display == "block") {
					abra.display = "none";
					} else {
					abra.display = "block"
					} 
				return false
				} else {
					return true
				}
			}
  	
  	</script>

</head>

y el html

Código:

<ul>
<li><a href="/"onclick="return expandir('contenido1');">contenido1</a></li>
<li><a href="/contenido2/" onclick="return expandir('contenido2');">contenido2</a></li> 	
<li><a href="/contenido3/" onclick="return expandir('contenido3');">contenido 3</a></li>
<li><a href="/contenido4/" onclick="return expandir('contenido4');">contenido 4</a></li> 
</ul>

<div id="contenido1">
Contenido 1
</div>


<div id="contenido2">
contenido 2
</div>

<div id="contenido3">
contenido 3
</div>

<div id="contenido4">
contenido 4
</div>

nilburcion · #2 (**permalink**) 31/08/2012, 07:28

Hola violetabb aqui tienes la solución a tu problema:

Código:

<head>

<style type="text/css">
[contenido]{
  		display: none;
  	}
</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.display="none";
			}
				var abra = document.getElementById(zap).style;
				if (abra.display == "block") {
					abra.display = "none";
					} else {
					abra.display = "block"
					} 
				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>

Espero que fuese lo que querías.

violetabb · #3 (**permalink**) 31/08/2012, 09:35

nilburcion : Muchas gracias!!! era esto lo que queria te lo re agradezco...

estuve averiguando y hay plugins de JQuery que hacen lo mismo pero mas lindo.

en base a esto , conoces alguno que cargue el contenido de forma suave o con algun efecto?
tipo esta web
[URL="http://fuelbrandinc.com"]http://fuelbrandinc.com[/URL]

nuevamente gracias, no sabes como estuve buscando esta solucion! =)

nilburcion · #4 (**permalink**) 31/08/2012, 11:54

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.

violetabb · #5 (**permalink**) 31/08/2012, 14:15

nilburcion
mas perfecto no podia ser!!!! mil gracias Genio.
me permiti la libertad de modificarlo un poco jugando con las transparencias y me quedo genial y todo gracias a ti... estoy mas que agradecida. =)

mirza · #6 (**permalink**) 02/12/2012, 19:46

Buenas
Como se puede cambiar el lugar en donde se abre la ventana con el contenido?
Porque le doy click y se abre abajo, quisiera que se abra en una tabla a la derecha, es posible?

gracias