Tout 1er jQuery... toggle sur un div

Bonjour,

Je me lance dans jQuery et je souhaite tout bêtement taper dans un div (#contenu) pour:
1/ le masquer au chargement (il n'est pas en display: hidden pour rester accessible)
2/ utiliser une bascule par clic sur un lien
(a.toggle-content) pour lui faire faire SlideDown/up.

Je pensais utiliser le .slideToggle ...mais rien ne bouge et le masquage ne s'opère même pas au chargement.

<script type="text/javascript">
//<![CDATA[

$(document).ready(function() { 
 $("#contenu".hide();


     $(".toggle-content").click(function(){
           $("#contenu").slideToggle("slow");
        });


});

//]]> 
</script>

Je neserais pas contre un coup de main parce que je suis pur débutant avec ca.

Merci
Modifié par elz64 (17 Aug 2008 - 16:41)

Hello,

display:hidden n'existe pas en CSS, c'est soit display:none, soit visibility:hidden.

Pour masquer un élément au chargement et éviter le fouc, je te conseille plutot de créer une feuille de style spéciale qui ne sera chargée que si javascript est activé (avec un document.write par exemple) et dans laquelle tu précise un display:none à ton élément.

Ensuite ton code a une grosse erreur et ne sera pas executé, il te manque une parenthèse, essaie plutot $("#contenu").hide();
Modifié par Tymlis (18 Aug 2008 - 15:27)

Merci,

Oui mon clavier à fourché..display: none effectivement.

Mais il est réellement plus simple de masquer avec une seule ligne de script.

J'ai pu finalement arriver à structurer le code de manière corect :

<script type="text/javascript">
//<![CDATA[

$(function(){

        $("#contenu").hide();
        
          $(".toggle-content").click(function(){
        $("#contenu").slideToggle("slow");
         }); 

   

});


//]]> 
</script>

Reste à gérer l'aspect du lien de bascule selon la situation.

elz64 a écrit :

Mais il est réellement plus simple de masquer avec une seule ligne de script.

Cela est certes plus simple, mais te fera subir le fouc

Merci de ce lien explicitant un phénomène que je n'ai jamais vraiment rencontré.

Il semble que par un heureux "hasard" j'emploie systématiquement une série de link pour les css et jamais @import.

D'après ton article, il semble que cela soit une des conditions nécessaires, et suffisantes pour se prémunir du disgracieux FOUC.

Je note cependant la solution css si js actif, on ne sait jamais.

Hello,

elz64 a écrit :

...et jamais @import.

D'après ton article, il semble que cela soit une des conditions nécessaires, et suffisantes pour se prémunir du disgracieux FOUC.

Ce n'est pas tout à fait ça : lire cet article sur Blog & Blues en complément.
Modifié par Heyoan (18 Aug 2008 - 19:39)