Problema con múltiples botones y ocultar automáticamente con JQUERY

  • Autor Autor foroteta
  • Fecha de inicio Fecha de inicio
F

foroteta

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Quiero tener varios botones. He probado haciendo copy-paste tener 2 pero no funciona bien. Ejemplo: https://dl.dropbox.com/s/1kccp662acwqg14/jquery2.html/?dl=1
Tambien necesito que si hago clic en 1, y luego en otro, se oculte automaticamente el primero que estaba abierto (se colapse).

Insertar CODE, HTML o PHP: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button><h1>Toggle</h1></button>
<p style="display: none">Good Bye</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
<br />
<button><h1>Toggle</h1></button>
<p style="display: none">Good Bye</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
</body>
</html>

He intentado hacerlo con ejemplos que encontre en google y no me funcionaba bien, gracias de antemano. :encouragement:
 
Última edición:
Hola,

Es sencillo. Tienes 2 divs. Pregunta si está display:none; o display:block; al hermano div. Si hace click en el div1, pregunta al div2 cual es su estado. Y viceversa.

Un saludo,
Ángel.
 
sin jquery con puro javascrit 🙂 como dice angel


AngelSamuel dijo:
Hola,

Es sencillo. Tienes 2 divs. Pregunta si está display:none; o display:block; al hermano div. Si hace click en el div1, pregunta al div2 cual es su estado. Y viceversa.

Un saludo,
Ángel.
Hacer clic para expandir...
 
Perdon si no me he explicado bien.

Quiero tener varios botones. He probado haciendo copy-paste tener 2 pero no funciona bien. Ejemplo: https://dl.dropbox.com/s/1kccp662acwqg14/jquery2.html/?dl=1
Tambien necesito que si hago clic en 1, y luego en otro, se oculte automaticamente el primero que estaba abierto.

Insertar CODE, HTML o PHP: 
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>toggle demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<button><h1>Toggle</h1></button>
<p style="display: none">Good Bye</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
<br />
<button><h1>Toggle</h1></button>
<p style="display: none">Good Bye</p>
<script>
$( "button" ).click(function() {
$( "p" ).toggle();
});
</script>
</body>
</html>
 
¿Esto es lo que quieres?

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>toggle demo</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $(function(){
	    $('button').click(function(){
	        $('p').hide();
		$(this).next('p').show();
	    });
    });
    </script>
</head>
<body>
    <button><h1>Toggle</h1></button>
    <p style="display: none">Good Bye</p><br>

    <button><h1>Toggle</h1></button>
    <p style="display: none">Good Bye</p>
</body>
</html>

Pruébalo.
 
Última edición:
Si eres creyente, que dios te bendiga
worship2.gif
bow.gif


ouch01 dijo:
¿Esto es lo que quieres?

HTML: 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>toggle demo</title>
    <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
    <script>
    $(function(){
	    $('button').click(function(){
	        $('p').hide();
		$(this).next('p').show();
	    });
    });
    </script>
</head>
<body>
    <button><h1>Toggle</h1></button>
    <p style="display: none">Good Bye</p><br>

    <button><h1>Toggle</h1></button>
    <p style="display: none">Good Bye</p>
</body>
</html>

Pruébalo.
Hacer clic para expandir...
 
Hay que estar conectado o registrado para responder aquí.

Temas similares

J
Ayuda para integrar AdFly con múltiples botones
Respuestas
8
Visitas
1K
kj2
kj2
Atrás
Arriba