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