My custom responsive accordions are not functioning as expected. The requirement is to display headings and content for desktop view, but switch to accordions on smaller devices. I have managed to do this, however, when resizing the window, the functionality becomes glitchy with weird animations and sometimes doesn't work at all.
Can someone please assist me in identifying what could be causing the issue in my code?
Here is the URL to jsBin:
And here is the JavaScript code snippet:
if($(window).width() < 360){
$('h2').on('click', function() {
var _target = $(this).next('.responsiveTap');
if(_target.css('display') == 'none'){
_target.slideDown();
$(this).addClass('active');
}else{
_target.slideUp();
$(this).removeClass('active');
}
});
}
else if($(window).width() > 359){
$('h2').on('click', function() {
return false;
});
}
$(window).resize(function(){
if($(window).width() < 360){
$('h2').on('click', function() {
var _target = $(this).next('.responsiveTap');
if(_target.css('display') == 'none'){
_target.slideDown();
$(this).addClass('active');
}else{
_target.slideUp();
$(this).removeClass('active');
}
});
}
else if($(window).width() > 359){
$('h2').on('click', function() {
return false;
});
}
});
Thank you in advance for your help, Mufeed Ahmad