Bonjour et bienvenue dans ce nouveau tutoriel.
Je vais vous montrer au cours de celui-ci comment faire,
simplement, pour afficher ou cacher du texte sur votre
page web. (mais si, vous savez, le système de spoiler sur
les forums :p)
Pour commencer, placez ce code entre les deux balise d'en-tête
(head) il va nous servir a créer la fonction "visibilite" qui aura pour
rôle d'afficher ou de cacher notre texte.
<script>
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
if (targetElement.style.display == "none")
{
targetElement.style.display = "" ;
} else {
targetElement.style.display = "none" ;
}
}
</script>
Il s'agit la d'un simple boucle qui selon la valeur du "display" de votre
div va changer sa valeur afin d'afficher ou de masquer la partie cachée.
Je ne m'attarderais donc pas trop la dessus. Sachez toute fois que comme
tout Javascript, ça ne marchera que si le Javascript est activé sur votre
navigateur. (les expert estiment que 10% des navigateurs n'ont pas Javascript
d'activé).
Passons maintenant au code (x)HTML en lui même. Celui-ci est bien évidement
à placer entre les balises "body". ^^
Pour ce code, le principe est simple, on va mettre un lien pour faire appel
à notre fonction Javascript définie plus haut.
<a href="javascript:visibilite('id de votre div');">afficher/masquer (vous pouvez mettre ici le texte que vous souhaitez)</a>
Ce lien sera placé juste au dessus d'une div qui aura pour style de départ
"display:none;". Cette propriété CSS sert en fait à "effecer" l'élément.
Nous ne la mettrons pas dans la page CSS séparée pour la simple raison
que c'est sur elle que va jouer notre fonction Javascript pour afficher/cacher
le texte. ;) ce qui nous donne donc comme code:
<a href="javascript:visibilite('spoiler');">afficher/masquer (vous pouvez mettre ici le texte que vous souhaitez)</a>
<div id="spoiler" style="display:none;">
<!-- Ici, le texte que l'on veut afficher/cacher -->
</div>
Évidement, le block qui va s'afficher/cacher n'est pas mis en forme ici,
il n'appartient qu'à vous de lui donner dans une feuille CSS liée à la page
la forme que vous souhaitez.
Voilà, à vous de jouer pour créer vos propre style, je laisse cela à votre
propre volonté, a vous de l'adapter selon vos besoins/envies. ;)
J'espère vous retrouver bientôt dans un autre tutoriel,
Nico57130.
Page de démonstration => ici <=