Для закрытия открытого div требуется двойной щелчок

Question

Я создал серию кнопок с изображением, которые заставляют div открываться и закрываться при нажатии. Он работает нормально, за исключением того, что во второй раз, когда пользователь нажимает одну из кнопок, ему нужно дважды щелкнуть, чтобы открыть div. Не могли бы кто-нибудь сказать мне, как это исправить?

Вы можете увидеть это здесь: https://jecofinishing.com/ в разделе «Если вы можете это во сне ... мы можем это сделать»

Вот мой код:

jQuery(document).ready(function($){

$('#effectcarousel img[alt="glossbutton"], .glossbutton').toggle(function(){
    var el = $('#gloss'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    $("#stains,#pigmented,#effects,#faux").animate({height:0});
    $("#gloss").animate({height: autoHeight},500);
  },function(){
    $("#gloss").animate({height:0},500);
});

  
$('#effectcarousel img[alt="stainbutton"],.stainbutton').toggle(function(){
    var el = $('#stains'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    $(".collapsible").animate({height:0},500);
    $("#stains").animate({height: autoHeight},500);
  },function(){
    $("#stains").animate({height:0},500);
});
  
$('#effectcarousel img[alt="pigmentbutton"],.pigmentbutton').toggle(function(){
    var el = $('#pigmented'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    $(".collapsible").animate({height:0},500);
    $("#pigmented").animate({height: autoHeight},500);
  },function(){
    $("#pigmented").animate({height:0},500);
});

$('#effectcarousel img[alt="effectbutton"],.effectbutton').toggle(function(){
    var el = $('#effects'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    $(".collapsible").animate({height:0},500);
    $("#effects").animate({height: autoHeight},500);
  },function(){
    $("#effects").animate({height:0},500);
});

$('#effectcarousel img[alt="fauxbutton"],.fauxbutton').toggle(function(){
    var el = $('#faux'),
    curHeight = el.height(),
    autoHeight = el.css('height', 'auto').height();
    $(".collapsible").animate({height:0},500);
    $("#faux").animate({height: autoHeight},500);
  },function(){
    $("#faux").animate({height:0},500);
});

});