jquery alternar un div cuando otro activado

Realmente me quedé con mi código, funciona bien excepto por una cosa, necesito cerrar cualquier div abierto, cuando hago clic en otro div para abrir, aquí está mi código:

function readFaq() {

$('.find-faq-inner h3').prepend('<span id="spanfaq" class="faq-open"></span>');

$('.find-faq-inner h3').each(function () {
    var tis = $(this), state = false;
    var answer = tis.next('div').hide().css('height', 'auto').slideUp();

    tis.click(function () {
        state = !state;
        answer.slideToggle(state);
        tis.toggleClass('active', state);

        if (state == true) {
            tis.find('#spanfaq').removeClass('faq-open');
            tis.find('#spanfaq').addClass('faq-close');
        }
        else {
            tis.find('#spanfaq').removeClass('faq-close');
            tis.find('#spanfaq').addClass('faq-open');
        }

    });
    });
}


<div class="find-faq-inner">
    <div class="text">
    <h3>FAQ1</h3>
    <div>
    text of faq
    </div>
    </div>
</div>

Cualquier idea sería útil, gracias

preguntado el 22 de mayo de 12 a las 17:05

¿Dónde se llama esa función? ¿Podemos obtener algo más de marcado? -

Esta línea "var respuesta = tis.next('div').hide().css('height', 'auto').slideUp();" hace demasiadas cosas a la vez; deberías considerar separarlo. -

1 Respuestas

function readFaq() {

$('.find-faq-inner h3').prepend('<span id="spanfaq" class="faq-open"></span>');

$('.find-faq-inner h3').each(function () {
    var tis = $(this), state = false, answer = tis.next('div').hide().css('height', 'auto').slideUp();
    tis.click(function () {
        state = !state;

       $('.find-faq-inner .text div').hide();// This will hide all the divs

        answer.slideToggle(state);
        tis.toggleClass('active', state);

        if (state == true) {
            tis.find('#spanfaq').removeClass('faq-open');
            tis.find('#spanfaq').addClass('faq-close');
        }
        else {
            tis.find('#spanfaq').removeClass('faq-close');
            tis.find('#spanfaq').addClass('faq-open');
        }

    });
    });
}

En la función anterior he añadido $('.find-faq-inner .text div').hide();

Esto ocultará todos los divs en el find-faq-inner div, utilícelo en consecuencia en su código.

Para estar más seguro también puedes usar

$('.find-faq-inner .text > div').hide();

Ocultará solo aquellos divs que son hijos directos de div de clase text

contestado el 22 de mayo de 12 a las 17:05

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.