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.