tengo una pagina asi:
1. una imagen y una palabra sobre ella
2. al darle click a la palabra desaparecen la imagen y la palabra, y muestra otra imagen junto con un parrafo en la parte inferior
3. si decides dar click sobre el parrafo te muestra un texto
4. Si le das otro click al parrafo oculta el texto.
Todo va bien, porque que le doy click al parrafo una vez y me muestra el texto, pero le vuelo a dar otro click, y no me oculta el texto, sino que lo duplica.
¿puede alguien decirme qué esta mal?
Muestro el código para mayor información:
Código :
<html>
<head>
<style type="text/css">
#dos {margin-top: -8%; cursor:pointer;}
.cinco {float: left; margin-top: 3%}
</style>
<title>Ejemplo pagina</title>
<script type="text/javascript"
src="M:\dd\jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#dos").click(function(){
$("#uno").remove();
$("#dos").hide();
$("#tres").add('<img src="MUJER UNICA.JPG" width="75%" height="550" title="actitud"/>').appendTo(document.body).addClass("cinco")
$("#seis").add('<p>puerta uno</p>').appendTo(document.body).css({'margin-top' : '64%', 'cursor' : 'pointer'}).click(function () {
$("#siete").add('<a href="http://www.google.com">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</a>').appendTo(document.body).css({'display' : 'none', 'margin-top' : '1%'}).toggle('slow')
});
});
});
</script>
</head>
<body>
<p>Esto es una prueba de que el contenido se efeccta en la misma pagina</p>
<div class="cinco">
<div id="uno" class="ocho"><img class="uno" src="Gráfico2.JPG" width="75%" height="350" title="actitud"/></div>
<div id="dos">Hola</div>
<div id="tres"></div>
<div id="seis"></div>
<div id="siete"></div>
</div>
</body>
</html>
Salu2.
