[SOLUCIONADO] Mostrar / ocultar un contenido

letni · #1 (**permalink**) 27/05/2013, 02:07

Hola,

Tengo este código Jquery dentro de la sección head, para mostrar / ocultar un contenido cuando pincho sobre un elemento de una lista ordenada:

Código:

		$(document).ready(function(){
			estado=0;						   
			$("#muestraElemento").click(function () { 
			   if(estado==0) {
				 $('#contenidoGeneradoPorElemento').slideUp('fast');
				 $('#muestraElemento').html('<li>Elemento</li>');
				 estado=1;
			  } else {
				 $('#contenidoGeneradoPorElemento').slideDown('fast');
				 $('#muestraElemento').html('<li>Elemento</li>');
				 estado=0;
			  }
			});
		});

el elemento lo tengo dentro de la sección body del html:

Código:

	<body>
		<ol>
			<a id="muestraElemento" href="#"><li>Elemento</li></a>
			<div id="contenidoGeneradoPorElemento">
				<p>descripcion</p>
			</div>	
		</ol>	
	</body>

Como veis, la función es dependiente de que el identificador del elemento de la lista ordenada sea "muestraElemento" y de que el identificador del div sea "contenidoGeneradoPorElemento". ¿Cómo puedo hacerlo genérico?

El código completo:

Código:

<html>
	<head> 
		<title>Prueba</title> 
		<script language="javascript" src="jquery-1.3.2.min.js">
		</script>
		<script language="javascript">
		$(document).ready(function(){
			estado=0;						   
			$("#muestraElemento").click(function () { 
			   if(estado==0) {
				 $('#contenidoGeneradoPorElemento').slideUp('fast');
				 $('#muestraElemento').html('<li>Elemento</li>');
				 estado=1;
			  } else {
				 $('#contenidoGeneradoPorElemento').slideDown('fast');
				 $('#muestraElemento').html('<li>Elemento</li>');
				 estado=0;
			  }
			});
		});
		</script>
	</head>
	<body>
		<ol>
			<a id="muestraElemento" href="#"><li>Elemento</li></a>
			<div id="contenidoGeneradoPorElemento">
				<p>descripcion</p>
			</div>
			<a id="muestraElemento2" href="#"><li>Elemento2</li></a>
			<div id="contenidoGeneradoPorElemento2">
				<p>descripcion2</p>
			</div>
		</ol>	
	</body>
</html>

Saludos.

diurno10 · #2 (**permalink**) 27/05/2013, 10:36

Código:

$(document).ready(function(){
			estado=0;						   
			$("ol a").click(function () { 
                             var _this = $(this);
			   if(estado==0) {
				 $('#contenidoGeneradoPorElemento').slideUp('fast');
				 $(_this).html('<li>Elemento</li>');
				 estado=1;
			  } else {
				 $('#contenidoGeneradoPorElemento').slideDown('fast');
				 $(_this).html('<li>Elemento</li>');
				 estado=0;
			  }
			});
		});

ahora nose si #contenidoGeneradoPorElemento tambien es dinamico, si es asi agregale un atributo al <a> y tomalo en el evento click

letni · #3 (**permalink**) 27/05/2013, 10:49

Sí, es dinámico, ¿cómo le meto un atributo?

diurno10 · #4 (**permalink**) 27/05/2013, 10:55

Código:

               <ol>
			<a  alt="mivalor" id="muestraElemento" href="#"><li>Elemento</li></a>
			
		</ol>

yo dirira q tomes el id, ya que es unico, sino agrega otro atributo como el que yo agregue alt="mivalor", luego lo recuperas asi.

Código:

$("ol a").click(function () { 
                             var _this = $(this);
                             var contenedorHijo = _this.attr('id');
			   if(estado==0) {
				 $('#contenidoGeneradoPorElemento').slideUp('fast');
				 $(_this).html('<li>Elemento</li>');
				 estado=1;
			  } else {
				 $('#'+contenedorHijo ).slideDown('fast');
				 $(_this).html('<li>Elemento</li>');
				 estado=0;
			  }
			});

letni · #5 (**permalink**) 27/05/2013, 10:56

Lo pruebo y te cuento.

Muchas gracias.

letni · #6 (**permalink**) 28/05/2013, 01:11

Funciona a la perfección. Muchas gracias.