Masquer/afficher du contenu

[Hyogapag]

Pour commencer, je suis novice en Javascript. Comme je ne suis pas un fan des effets visuels et autres artifices esthétiques, je ne me suis pour ainsi dire jamais penché sur les possibilités offertes par le DHTML. Seulement je voudrais ajouter à l'une des pages de mon site une fonctionnalité, très répandue de nos jours, qui permet de masquer/afficher du contenu par un simple clic sur un lien. Le script que j'utilise marche à merveille, d'ailleurs le voici pour ceux qui tomberaient sur ce post en cherchant un script offrant cette possibilité :

<script type="text/javascript">
<!--Merci à Dustin Diaz
function switchMenu(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != "none" ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}
//-->
</script>

Le remerciement est de moi. On appelle ensuite le code de la façon suivante :

<a onclick="switchMenu('poster-message');">écrire un message</a>

où poster-message indique la valeur de l'attribut id de la balise dont le contenu doit être affiché ou masqué.

Cependant, il se pose encore un problème qui, tant qu'il ne sera pas résolu, m'empêchera d'utiliser ce script sur mon site : la compatibilité avec les navigateurs où Javascript est désactivé ou n'est pas supporté.

Je n'ai pas trouvé comment vérifier si Javascript est désactivé, mais je pense avoir une idée élégante, et j'aurais besoin de vous pour la finaliser.

Je précise au passage que les possibilités offertes par les balises <noscript> ne m'ont pas convenues.

Ma solution est simple : en général, par défaut, on cache le contenu, et lors d'un événement comme onclick on le fait apparaître. Il est caché au départ par du CSS comme style="display: none". Seulement si ce display none est appelé lui-même par du Javascript, alors une personne ayant désactivé Javascript verra la page entièrement dépliée, ce qui n'est franchement pas gênant.

Seulement je n'ai pas réussi à réaliser un tel script. J'ai bien tenté de faire des fonctions mais aucune n'a fonctionné. La seule solution que j'ai réussi à exploiter n'est pas reconnue par le W3C, car elle suppose que javascript ou document.write soit un attribut possible de balises comme <div> :

<div id="poster-message" document.write("style="display: none"");>

Pourriez-vous me proposer une alternative à cette solution qui ne vienne par troubler la validation de mon site selon la DTD XHTML 1.0 Strict? Merci d'avance.

Modifié 2 Septembre 2006 par Arlette

[MS-DOS_1991]

C'est une excellente idée, idée que j'ai d'ailleurs implémentée dans mon blog sur les nouilles

Le fait de cacher un élément en JavaScript est très simple : il te suffit d'attribuer un ID au bloc de contenu que tu souhaites rendre visible / invisible, puis de mettre le code suivant à la fin de ta page :

<script type="text/javascript">
document.getElementById('id_du_bloc_a_cacher').style.display = 'none';
</script>

Bien entendu, tu peux cacher ainsi plusieurs blocs (voire tous) afin de présenter une page "propre" au visiteur

[Hyogapag]

RRaaaahhh merci ! En fait j'avais déjà fait un code comme ça, mais je l'avais positionné au-dessus de la balise à cacher... et ça ne marchait pas (logique en fait !).

[MS-DOS_1991]

Pas de quoi

Tant qu'à mettre des effets JavaScript, autant s'assurer qu'ils ne gèneront pas ceux qui n'en veulent pas (ou ne peuvent pas en profiter)

[Hyogapag]

Je tiens à dire, pour ceux qui souhaitent à tout prix éviter tout Javascript dans leurs pages, qu'il existe une alternative qui utilise seulement le CSS. Cependant, IE (IE7 compris), ne la supporte pas. On peut toutefois imaginer une solution alternative pour les microsoftiens similaire à celle proposée ci-dessus pour les utilisateurs n'acceptant pas le Javascript.

Voici la page qui m'a inspiré cette solution.

Il suffit de faire deux liens ( montrer le texte | cacher le texte) au lieu d'un, et de jouer sur les visibility et autres display, et le tour est joué. Je pense que je vais implémenter cette solution sur mon site. Lorsque j'aurai finalisé le résultat, je le posterai dans la rubrique de ce forum consacrée au CSS.

Voilà l'url en question.