Démarrage et arrêt accordéon réactif

Question

J'ai le code jQuery pour faire l'accordéon pour le contenu de la page lorsque la largeur de la fenêtre est 500px ou moins. Cela fonctionne bien mais il y a peu de problèmes. Quand je redimensionner la taille de la fenêtre par exemple de 900px à 450px et cliquez sur le lien accordéon h3 pour ouvrir le contenu se comporter strangly. Il ouvre et ferme le contenu 4 fois et après il reste ouvert, même chose lors de la fermeture accordéon ouvert.

Je pense que je manque quelque chose évidente, mais ne pouvait pas comprendre ce qu'elle est.

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(); } 
}); 
}); 

Dans mon JFIDDLE exemple, il semble ouvrir la boucle accordéon encore plus près.

Answer 1

Voici le code correct (vous pouvez trouver le 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); 
      } 
     } 
    });