Question

So, I have the following code:

$(".btn-slide-1").click(function(){
    $('div[id^="panel"]').slideUp("slow");
    $('ul#menu li a').removeClass("active");
    $("#panel-about").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

$(".btn-slide-2").click(function(){
    $('div[id^="panel"]').slideUp("slow");
    $('ul#menu li a').removeClass("active");
    $("#panel-products").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

$(".btn-slide-3").click(function(){
    $('div[id^="panel"]').slideUp("slow");
    $('ul#menu li a').removeClass("active");
    $("#panel-specs").slideToggle("slow");
    $(this).toggleClass("active"); return false;
});

Essentially I was looking to get this streamlined, but all it does is when you click on an a class it open the div relating to this. It all works OK, but if I click on the same item again, it just collapses and then instantly reopens again.

Answer 1

You can warp it in a condition check.

$(".btn-slide-1").click(function(){
    if (!$(this).hasClass("active")) {
        $('div[id^="panel"]').slideUp("slow");
        $('ul#menu li a').removeClass("active");
        $("#panel-about").slideToggle("slow");
        $(this).toggleClass("active"); return false;
    }
});