Question

All,
I’ve got the following code to open some divs that are acting as Toggles:

$(".tb-toggle").each(function(){
    $(this).find(".box").hide();
});

$(".tb-toggle").each(function(){
     $(this).find(".trigger").click(function() {
            $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
            return false;
     });
});

Here is my HTML to display the Toggles:

<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion</a><div class="box">This is fancy toggle accordion</div><!-- .box (end) --></div>
<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion 2</a><div class="box">This is fancy toggle accordion 2</div><!-- .box (end) --></div>
<div class="tb-toggle toggle-fancy"><a href="#" class="trigger"><span>+</span>Toggle Accordion 3</a><div class="box">This is fancy toggle accordion 3</div><!-- .box (end) --></div>

This works fine and opens up my Toggle fine. However, when this happens I’d like close the other open Toggles.

I found this on jQuery http://jqueryui.com/demos/accordion/ so I tried to adjust my code to this:

$(".tb-toggle").each(function(){
     $(this).find(".trigger").click(function() {
            $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
            return false;
     });
}).next().hide();

This doesn’t work. I think I might have to remove the active toggle class for the other ones but not sure how to do that.

I also tried this bit of code:

$(".tb-toggle").each(function(){
     $(this).find(".trigger").click(function() {
            $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
            return false;
     });
}).next().toggleClass("active");

Can anyone point me in the right direction?

Here is an updated JSFiddle: http://jsfiddle.net/HHtBX/

Thanks!

Answer 1

FIXED 🙂 Update after the jsfiddle for specific case Working demo: http://jsfiddle.net/HHtBX/2/

JQuery Code

$(".tb-toggle").each(function(){
    $(this).find(".box").hide();
});

$(".tb-toggle").each(function(){
    $(this).find(".trigger").click(function() {
        $('.tb-toggle a').removeClass('active').next().slideUp('slow');
        $(this).toggleClass("active").next().stop(true, true).slideToggle("slow");
        //return false;
    });
});

Previous version when no Jsfiddle was there provided

Hiya Okies this might help you: http://jsfiddle.net/tovic/CzE3q/

Working demo: (bit more structured) http://jsfiddle.net/CzE3q/21/ – Since you have no jsfiddle I will assume your HTML is fine and try this

Hope this helps, cheers!