menu desplegable

Hallking · #1 (**permalink**) 12/06/2012, 06:54

Buenas a todos, el problema que tengo es con este fragmento de código el cual me funciona pero no como esperaba que funcionara lo que ando buscando es que al presionar la primera opción se desplegare la respuesta solo de esta opción pero si doy clic en la segunda que se cierra la primera y se despliegue la segunda, esto es lo que quiero hacer pero el código me desplegar ambas respuesta al dar clic a cual quier opción... si me pueden ayudar este es el codigo

Código:

<!DOCTYPE html>
<html>
<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
$(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
.panel,flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
height:100px;
width: 100px;
display:none;
}
</style>
</head>
 
<body>

<p class="flip">opcion 1</p> 
 
<div class="panel">
respuesta
</div>
<br/>
<p class="flip">opcion 2</p>
<div class="panel">
respuesta
</div>
 
</body>
</html>

espero su ayuda

Rosencrantz · #2 (**permalink**) 12/06/2012, 14:11

en el código tienes que abra todos los paneles que tengan la clase "panel" por eso al dar click se abren todos.

Prueba con esto.

Código Javascript:

Ver original$('.flip').click(function(){
                $('.panel').hide(); // oculte todos los paneles
                $(this).next('div').slideToggle('slow'); // el div que sigue aplique slideToggle
            
            });

Saludos