Mootools / toggle et display none

Bonjour à tous,

Mootools v1.1

Voila j'essaie de faire un effet toggle sur un block. Rien de plus facile en suivant la démo sur le site de mootools mais le problème et que dans mon cas j'aimerai que mon block ne soit pas visible et par la suite si l'afficher ou le cacher.
Donc si je mets un display:none sur le block de départ plus rien ne marche.
La seule solution que j'ai trouvé est celle ci :

window.addEvent('domready', function(){

	var mySlide = new Fx.Slide('toggle');
	var mySlide = new Fx.Slide('toggle').hide();
	$('test').addEvent('click', function(e){
		e = new Event(e);
		mySlide.toggle();
		e.stop();
	});

});

En gros je cache mon block au démarrage. Sous firefox c'est invisible mais sous certain navigateur on voit le block puis il disparait

Quelqu'un aurait une solution ?

Merci d'avance

Tu peux mettre ton block en opacité 0 en CSS, le temps que le JS fasse action (et donc fasse réellement disparaître le block). C'est un peu bourrin, mais ça devrait fonctionner.

Noix de Coco a écrit :
Tu peux mettre ton block en opacité 0 en CSS, le temps que le JS fasse action (et donc fasse réellement disparaître le block). C'est un peu bourrin, mais ça devrait fonctionner.

Merci pour ta réponse je vais tester ca.

Est ce que opacity fonctionne sur tout les navigateurs ?

opacity oui sauf sur IE. J'y viens juste après. Opacity s'utilise comme ceci :

opacity: 1;

Il varie de 0 à 1, où 0 cache complètement le block et 1 l'affiche à 100%.
Pour Internet Explorer, il faut utiliser filter :

filter: alpha(opacity=100);

Lui fonctionne sur une échelle de 0 à 100. Tu peux bien entendu utiliser les deux en même temps pour la compatibilité.

Noix de Coco a écrit :
opacity oui sauf sur IE. J'y viens juste après. Opacity s'utilise comme ceci :

opacity: 1;

Il varie de 0 à 1, où 0 cache complètement le block et 1 l'affiche à 100%.
Pour Internet Explorer, il faut utiliser filter :

filter: alpha(opacity=100);

Lui fonctionne sur une échelle de 0 à 100. Tu peux bien entendu utiliser les deux en même temps pour la compatibilité.

Ta solution fonctionne mais toujours pareil on voit la mise en forme de la page changer car le bloc même si on le voit pas (opacity 0) il disparait donc la structure change.
Mais la solution que j'ai adopté (pas très propre mais bon) la voici :
1 - Je mets mon bloc avec une hauteur de 0 px (et un overflow hidden)
2 - Je fais mon traitement js ( en gros je le cache hide() )
3 - Je refixe une hauteur pour mon bloc

Dans mon cas je peux mettre une hauteur fixe car le contenu ne changera jamais c'est un petit form.

Ou sinon pour la taille s'ajuste en fonction du contenu, tu peux utiliser la valeur "auto" :

height: auto;