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

F

foroteta Seguir

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
15 May 2009
Mensajes
264
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:
A

AngelSamuel

Delta
Social Media
Desde
11 May 2012
Mensajes
514
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
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.
 
F

foroteta

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
15 May 2009
Mensajes
264
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>
 
O

ouch01

Curioso
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
13 Ene 2013
Mensajes
10
¿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:
F

foroteta

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
15 May 2009
Mensajes
264
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í.
Arriba