entre Desarrolladores

Question

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>

Answer 1

3 Respuestas

Answer 2 · 2014-01-10T15:12:20+0000

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.

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

Jaumesv · Answer 3 · 2014-01-11T02:38:20+0000

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/

Answer 4 · 2014-01-12T11:41:38+0000

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";  
    }
}

Pregunta

Ayuda para Mostrar/ocultar contenido con jquery

Por favor, accede o regístrate para añadir un comentario.

3 Respuestas

mrczrt comentado Ene 10, 2014

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

mchojrin respondió Dic 9

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta