Hacer Pregunta

Conecta

entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

Ayuda para Mostrar/ocultar contenido con jquery

preguntó
Web
911 Vistas
3 Respuestas
abierta

Buenos dias y gracias por adelantado.

Necesito tener varios botones, ahora tengo 2 pero no me funcionan correctamente.

Tambien necesito que si doy clic en uno (se muestra contenido) pues si doy clic en otro, se oculte lo que tenia abierto y se abra el nuevo.

Sencillo de decir pero llevo horas probando y no lo logro. Dejo el codigo ¡¡gracias!!.

<!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>
por MaximumArmor (130 puntos) en Web

3 Respuestas

1voto

mrczrt Puntos6940

Hola que tal, antes que nada, trata de siempre usar ready para evitar buscar donde aun no existe nada sin importar si lo usas en head o en body como costumbre :D.

Puedes usar este script : 

$(document).ready(function(){
    $('button').click(function(){
        $(this).siblings('p:visible').hide().end().next().show();
    });
});

Solo una vez no en cada elemento al final de body o en el head donde gustes.

Si te preguntas que hace, bueno busca todos los p visibles y lo o los oculta, despues va por el p que tiene mas cerca y lo muestra, saludos.

por mrczrt (6.940 puntos)

0voto

mrczrt comentado

Se me olvidaba, tanto los p como los button deben ser hermanos todos para que funcione.

por mrczrt (6.940 puntos)

2votos

Jaumesv Puntos1970

Hola!
Yo lo he hecho asi:

<title>toggle demo</title>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<body>
<button><h1>Toggle</h1></button>
<p style="display: none">Hi</p>
<button><h1>Toggle</h1></button>
<p style="display: none">Good Bye</p>
<script>
$( "button" ).click(function() {
$("p").hide();
$(this).next().toggle();
});
</script>

He jugado un poco con el elemento de despues de cada boton para mostrarlo y primero he ocultado todos los elemento p.
http://jsfiddle.net/TpK3m/1/

por Jaumesv (1.970 puntos)
editado por

1voto

pepe Puntos690

sin jquery podria ser asi:

   function HideId(IdHide) {
    document.getElementById(IdHide).style.display = "none";
}
function ShowId(IdShow) {
    document.getElementById(IdShow).style.display = "block"
}
function ShowHideId(IdElement) {
    var IdElem = document.getElementById(IdElement);
    if (IdElem.style.display=="none" || IdElem.style.display=="") {
        IdElem.style.display = "block"; 
    } else {
        IdElem.style.display = "none";  
    }
}
por pepe (690 puntos)

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


Sin Respuesta

Preguntas relacionadas

Actividad Reciente

Ultimas Preguntas

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Etiquetas

Categorías

Conecta