Comment définir la méthode jQuery slideUp() pour masquer les éléments lors du chargement de la page

Question

J'utilise la fonction slideUp et slideDown jQuery pour afficher des images sur une page Web qui fait glisser le texte vers le bas une fois que l'utilisateur clique dessus. Dans le code suivant, j'ai le js réglé pour le faire, mais quand je charge la page, le texte est déjà en panne. La fonction de diapositive fonctionne, mais je voudrais que la page soit chargée avec le texte caché.

Toute suggestion sur la façon dont je peux modifier le code pour que le texte soit masqué lorsque la page est chargée serait très appréciée. Merci d'avance de prendre le temps de regarder ça!

Voici le code:

jQuery(document).ready(function($) { 
    $(".pic").click(function(e) { 

var more = $(this).find('.more'); 

if ($(more).is(':visible')) { 
    $(more).slideUp('fast') 
} 
else { 
    $(more).slideDown() 
} 
$('.more').not($(more)).slideUp() 
}) 

}); 

Answer 1

Vous avez deux options. Soit définir l'état initial .pic caché dans votre CSS comme ceci:

.more { 
    display: none; 
} 

ou déclencher immédiatement votre événement JavaScript après la mise en place du rappel, qui parce qu'ils sont actuellement visibles, va les cacher. Cela peut être fait comme suit:

jQuery(document).ready(function($) { 
    $(".pic").click(function(e) { 
     var more = $(this).find('.more'); 

     if ($(more).is(':visible')) { 
      $(more).slideUp('fast') 
     } else { 
      $(more).slideDown() 
     } 
     $('.more').not($(more)).slideUp() 
    }).trigger('click'); 
});