Afficher/ Masquer du contenu html via jQuery

Accueil > Programmation > Jquery : enrichissez vos pages webs ! > Afficher/ Masquer du contenu html via jQuery

Afficher/ Masquer du contenu html via jQuery

Partager :

Pour se faire, nous allons utiliser les fonctions "show", "hide" et "toggle" de jQuery.

Pour tester notre code : copier/coller le dans une de vos page après avoir chargé jQuery (http://tuto.nowwweb.com/sujet-15-charger_jquery_dans_une_page.html)

<p style="display: none" class="a_masquer">Hello</p>
<p class="a_afficher">Hello</p>
<p class="a_afficher_ou_masquer">Hello</p>

Bouton de test :

<input type="button" value="Masquer" onclick="$('.a_masquer').show('slow');" />

<input type="button" value="Masquer" onclick="$('.a_afficher').show('slow');" />

<input type="button" value="Masquer" onclick="$('.a_afficher_ou_masquer').show('slow');" />

On peut passer un paramètre de vitesse à ces différents fonctions :

un nombre de millisecondes qui determinera le temps d'affichage
'fast' pour 200 and 600 millisecondes,
'slow' pour 600 milliseconds,

Ecrit par Kévin Couvet le 01/09/2011

Dernière modification le 01/09/2011

Categorie : Jquery : enrichissez vos pages webs !

Autres articles sur : HTML , Javascript , Jquery

Commentaires

Agence web - Nos auteurs- Tutoriels- Mentions légales