Toggle javascript
Buenos días,
Tengo este codigo en javascript y el problemilla que tengo es cuando hago click en uno no se cierra el otro y quisiera saber como hacerlo, tipo preguntas de un sitio que cuando click en una se cierra la anterior y se abre la que haces el click, gracias de antemano por la ayuda
/* html*/
<div id="newMenu">
<ul class="menu">
<li id="faq">Preguntas Frecuentes</li>
<li id="ayuda">Ayuda</li>
</ul><br/>
<div class="ayuda" style="display:none;" >...ayuda
Te ofrecemos un nuevo espacio donde diseñar tus propios productos, administrar i almacenar tus fotos i compartirlas con quien quieras.
Aqui puedes descargarte la ayuda.
</div>
<div class="faq" style="display:none;">
<ul class=""><li>¿Como funciona Photolife?</li>
<li>¿Debo descargar algún software?</li>
<li>¿Que son las fotos exclusivas?</li>
<li>Compartir y Galería Pública</li>
<li>¿Cuantas fotos puedo subir?</li>
<li>¿Como empiezo a realizar un producto?</li>
<li>¿Y si no recuerdo mis datos de usuario y contraseña?</li>
<li>¿Y si no tengo tiempo de acabar mi producto?</li>
<li>¿Puedo modificar las plantillas de un producto empezado?</li>
<li>¿Cuánto tarda en llegar mi producto?</li>
<li>Mi pregunta no es ninguna de éstas</li>
</ul>
</div>
</div>
/*javascript*/
$("#ayuda").click(function(){
$(".ayuda").toggle();
});
});
$("#faq").click(function(){
$(".faq").toggle();
});
tavo_2
gracias por la respuesta, probare ahora hacerlo a ver q tal me sale, q tengas buen dia!!!
andrewman
Dada tu estructura, puedes utilizar lo siguiente:
$("ul.menu > li").click(function(){
var target = $(this).attr('id');
$('#newMenu > div').hide();
$('#newMenu > div.' + target).show();
});
Por partes, en caso que decidas hacer cambios.
Cuando se ejecute un click sobre lo elementos de lista con clase='menu':
$("ul.menu > li").click(function(){obtienes la id del elemento de la lista sobre el que se ejecuto el click y lo usas para definir el div que quieres mostrar
var target = $(this).attr('id');escondes todos los elementos:
$('#newMenu > div').hide();y finalmente muestras el div definido en la variable:
$('#newMenu > div.' + target).show();