jQuery slideToggle firing more than once on one click
Hi. I'm having problems where when I click my blog archive's button to open, the first <div> container will slide open then closed then open. This happens 3 times and stops. Does anyone know why? I can share the code as to where the problem may be happening.
- <script>
$(document).ready(function () {
$('.myBtn').click(function () {
$(".container").add('.container2').slideToggle("slow", function () {
if ($(".container2").is(':visible'))
$(".myBtn2").addClass('flip');
- else
$(".myBtn").removeClass('flip');
});
});
});
</script>
- <script>
$(document).ready(function (){
$('.myBtn').click(function (){
$(".myBtn2").animate({top: '1602px'}, 1200);
$(".container2").animate({top: '1600px'}, 1200);
$(".year2").animate({top: '1600px'}, 1200);
$(".myInnerBtn2").animate({top: '1634px'}, 1200);
$(".myInnerBtn3").animate({top: '1748px'}, 1200);
$(".myInnerBtn4").animate({top: '2083px'}, 1200);
$(".myInnerBtn5").animate({top: '2240px'}, 1200);
$(".myInnerBtn6").animate({top: '2531px'}, 1200);
$(".myInnerBtn7").animate({top: '3042px'}, 1200);
$(".myInnerBtn7a").animate({top: '3113px'}, 1200);
$(".myInnerBtn7b").animate({top: '3183px'}, 1200);
$(".myInnerBtn7c").animate({top: '3253px'}, 1200);
$(".myInnerBtn7d").animate({top: '3368px'}, 1200);
$(".myInnerBtn8").animate({top: '3437px'}, 1200);
$(".myInnerBtn9").animate({top: '3632px'}, 1200);
$(".myInnerBtn10").animate({top: '3792px'}, 1200);
$(".myInnerBtn11").animate({top: '3861px'}, 1200);
$(".myInnerBtn12").animate({top: '4020px'}, 1200);
$(".myInnerBtn13").animate({top: '4135px'}, 1200);
$(".myInnerBtn14").animate({top: '4248px'}, 1200);
$(".myInnerBtn15").animate({top: '4362px'}, 1200);
$(".myInnerBtn16").animate({top: '4698px'}, 1200);
$(".myInnerBtn17").animate({top: '4768px'}, 1200);
$(".myInnerBtn18").animate({top: '4970px'}, 1200);
$(".myInnerBtn19").animate({top: '5173px'}, 1200);
$(".myInnerBtn20").animate({top: '5367px'}, 1200);
$(".myInnerBtn21").animate({top: '5570px'}, 1200);
$(".myInnerBtn22").animate({top: '5728px'}, 1200);
$(".myInnerBtn23").animate({top: '5930px'}, 1200);
$(".myInnerBtn24").animate({top: '6045px'}, 1200);
$(".myInnerBtn25").animate({top: '6115px'}, 1200);
$(".myInnerBtn26").animate({top: '6229px'}, 1200);
$(".myInnerBtn27").animate({top: '6431px'}, 1200);
$(".myInnerBtn28").animate({top: '6635px'}, 1200);
$(".myInnerBtn29").animate({top: '6748px'}, 1200);
$(".myInnerBtn30").animate({top: '6996px'}, 1200);
$(".myInnerBtn31").animate({top: '7258px'}, 1200);
$(".myInnerBtn32").animate({top: '7416px'}, 1200);
$(".myInnerBtn33").animate({top: '7620px'}, 1200);
$(".myInnerBtn34").animate({top: '7821px'}, 1200);
$(".myInnerBtn35").animate({top: '8112px'}, 1200);
$(".myInnerBtn36").animate({top: '8490px'}, 1200);
$(".myInnerBtn37").animate({top: '8738px'}, 1200);
$(".myInnerBtn38").animate({top: '8890px'}, 1200);
});
});
</script>
I think the problem lies within the 2nd code here. I also have the HTML and CSS parts if that helps, but I really feel that the problem is within these codes