My drop down list has 2 sub-categories, but I'm encountering an issue where the second category does not fully expand when opened. I have shared my code on JsFiddle, and I would appreciate it if someone could take a look. It seems like there might be a problem with my jQuery or HTML implementation, so I've included all relevant details regarding my drop down list. The specific issue I'm facing is related to the 2013 category.
Here is the snippet of my jQuery code:
$(document).ready(function(){
$('.tab_container').click(function(){
if( $(this).parent().is('.open') ){
$(this).closest('.tabSlot').find('.tab_container_expanded').animate({'height' : '0'},500);
$(this).closest('.tabSlot').removeClass('open');
}else{
var newHeight =$(this).closest('.tabSlot').find('.tabs_expanded').height() + 'px';
$(this).closest('.tabSlot').find('.tab_container_expanded').animate({'height' : newHeight},500);
$(this).closest('.tabSlot').addClass('open');
}
});
});
$(document).ready(function(){
$('.tab_containerb').click(function(){
if( $(this).parent().is('.open') ){
$(this).closest('.tabSlotb').find('.tab_container_expandedb').animate({'height' : '0'},500);
$(this).closest('.tabSlotb').removeClass('open');
}else{
var newHeight =$(this).closest('.tabSlotb').find('.tabs_expandedb').height() + 'px';
$(this).closest('.tabSlotb').find('.tab_container_expandedb').animate({'height' : newHeight},500);
$(this).closest('.tabSlotb').addClass('open');
}
});
});
I believe that there might be a missing statement in the second function that I am struggling to identify, but that's just my current understanding of the situation.