Запуск и остановка аккордеона на отзывчивом

Question

У меня есть код jQuery, чтобы сделать аккордеон для содержимого страницы, когда ширина окна составляет 500 пикселей или меньше. Он отлично работает, но проблем мало. Когда я изменяю размер окна, например, с 900px до 450px и нажимаю ссылку h3 для открытия контента, он ведет себя странно. Он открывает и закрывает контент 4 раза и после него остается открытым, при закрытии открытого аккордеона.

Я думаю, что мне не хватает чего-то очевидного здесь, но просто не мог понять, что это такое.

jQuery(window).on("load resize",function(e){ 

jQuery(function() { 
    if(jQuery(window).width() <= 500) { 


     //ACCORDION BUTTON ACTION 
     jQuery('h3').click(function() { 
      if(jQuery(this).data("slided") === true) { 
       jQuery(this).next().slideUp('normal'); 
       jQuery(this).data("slided", false); 
      } else { 
       jQuery('h3').data('slided',false); 
       jQuery('.sec').slideUp('normal'); 
       jQuery(this).next().slideDown('normal'); 
       jQuery(this).data("slided", true); 
      } 
     }); 

     //HIDE THE DIVS ON PAGE LOAD  
     jQuery(".sec").hide(); 
    } else { jQuery(".sec").show(); } 
}); 
}); 

В моем JFIDDLE примере кажется, петля открыть скрыть гармошке еще больше.

Answer 1

Вот правильный код (вы можете найти FIDDLE here):

//ACCORDION BUTTON ACTION  
$('h3').click(
    function() {     
     if (jQuery(window).width() <= 500) {        
      if(jQuery(this).data("slided") === true) { 
       jQuery(this).next().slideUp('normal'); 
       jQuery(this).data("slided", false); 
       //alert('slided');       
      }         
      else { 
       jQuery('h3').data('slided',false); 
       jQuery('.sec').slideUp('normal'); 
       jQuery(this).next().slideDown('normal'); 
       jQuery(this).data("slided", true); 
      } 
     } 
    });