¿Es posible mostrar un div y ocultar todos los demás div en alternar (tres alternar)?

hey guys thanx for your last help in esta pregunta.
now i want to know that in place of one toggle button how can i use three toggle button?
mi código html es:

<div class="layer1">
<span class="heading">Header-1 </span><span class="heading">Header-1 </span><span class="heading">Header-1 </span>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<span class="heading">Header-2</span><span class="heading">Header-1 </span><span class="heading">Header-1 </span>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>
<span class="heading">Header-3</span><span class="heading">Header-1 </span><span class="heading">Header-1 </span>
<div class="content">Lorem ipsum dolor sit amet, consectetuer adipiscing elit orem ipsum dolor sit amet, consectetuer adipiscing elit</div>

y css es:

.layer1 {
margin: 0;
padding: 0;
width: 300px;
}

.heading {
 margin: 1px;
 color: #fff;
padding: 3px 10px;
cursor: pointer;
position: relative;
background-color:#c30;
}
.content {
padding: 5px 10px;
background-color:#fafafa;
}
p { padding: 5px 0; }

y jquery es:

jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".heading").click(function() {
        jQuery(this)
            .next(".content").slideToggle(500)
            .siblings(".content").slideUp(500);
    });
});

i want that i can open sub item of header-1 by clicking on any of three header button
but its not working. only 3rd button is working.
i think there will be some change in my jquery.
help me i am not clear.

preguntado el 28 de agosto de 12 a las 11:08

Could you provide more clear explanation... header-1 doesn't have any sub items.. only siblings -

I got the answer. they are copy past and want that. and i want same effect with all of that three spans. -

2 Respuestas

.next('.content') only looks at the next element, and if it matches '.content' then it uses it, otherwise it ignores it. .nextAll gets all the next elements ahead of it and putting :first after the class name means it will only select the first one it finds.

jQuery(document).ready(function() {
    jQuery(".content").hide();
    jQuery(".heading").click(function() {
        jQuery(this)
            .nextAll(".content:first").slideToggle(500)
            .siblings(".content").slideUp(500);
    });
});

Ejemplo: http://jsfiddle.net/KP55t/

Respondido 28 ago 12, 11:08

jQuery(document).ready(function() {
            jQuery(".content").hide();
            jQuery(".heading").click(function() {

                jQuery(this)
                    .nextAll(".content").eq(0).slideToggle(500)
                    .siblings(".content").slideUp(500);
            });
        });

Respondido 28 ago 12, 12:08

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