Mostrar texto ao clicar dentro de uma div

dany_danay · 08/05/2014

Hola! No se si ponerlo aquí o en javascript, pero bueno os comento que he probado muchas formas de poner un botoón que al hacer click muestre un pedazo de texto.
No me ha funcionado ninguna de las maneras si quiero que suceda dentro de un div.
Sí me funciona si está fuera de cualquier div...

Alguien me puede ayudar?

aperpen · 08/05/2014

Hola, eso se hace muy facil con jQuery, aqui te dejo dos ejemplos:

Usa un botón:

HTML:

<html>
<head>
<!--- INCLUIMOS JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!-- DEFINIMOS LA FUNCION QUE EJECUTARA EL BOTON -->
<script type="text/javascript">
function showHide(){
$('#text').slideToggle();
}
</script>
</head>

<body>
<!-- EL DIV QUE SE MOSTRARA -->
<div id="text">
  <p>Test</p>
</div>
<!-- BOTON QUE USANDO ONLCIK MOSTRARA Y OCULTARA EL DIV -->
<input type="button"  onClick="showHide();" value="Mostrar/ocultar div" />
</body>
</html>

Se oculta al clickar en el texto:

HTML:

<html>
<head>
<!--- INCLUIMOS JQUERY -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

<!-- DEFINIMOS LA FUNCION QUE EJECUTARA EL BOTON -->
<script type="text/javascript">
function showHide(){
$('#text').slideToggle();
}
</script>
</head>

<body>
<!-- EL DIV QUE SE MOSTRARA, SE OCULTA GRACIAS A ONCLICK -->
<div id="text" onClick="showHide();">
  <p>Test</p>
</div>
</body>
</html>

Te he dejado los codigos un poco explicados.

Luego tambien si necesitas algo mas complejo se puede usar el segundo código haciendo que al hacer click y al ocultarse aparezca un botón para volver a mostrarlo o en el primer código hacer que el botón muestre "Ocultar" si el texto se está mostrando o que diga "Mostrar" si el texto está oculto, si necesitas ayuda con algo de eso, dímelo.
Espero que te sirva.

OLMID · 09/05/2014

Te dejo otro ejemplo también con jq, en este caso sí podrás colocar varios div ocultos en la misma página con su respectivo botón, usando el mismo script:

VER EJEMPLO

Saludos 🙂

nxovoix · 09/05/2014

jajaja iba hacer algo parecido a OLMID xD.. pero bueno :encouragement:

kanikase · 09/05/2014

Ya te dieron unas buenas opciones, aqui te dejo el mio (sin jquery)
Edit fiddle - JSFiddle

sanmen1593 · 09/05/2014

Puedes usar setAttribute para modificar los atributos del div. Te dejo un enlace:

getAttribute y setAttribute en Javascript | Emilio Cobos

Mostrar texto ao clicar dentro de uma div

dany_danay

aperpen

OLMID

nxovoix

kanikase

sanmen1593

Tópicos similares