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

Mail : Pseudo :
Message :

De : Blackwolf Impossible de cacher le geaniontsire de lien avec le code fourni. J ai bien modifie9 le fichier functions.php via l e9diteur d apparence. J ai inse le 27/09/2014 à 09h00
Blackwolf Impossible de cacher le geaniontsire de lien avec le code fourni. J ai bien modifie9 le fichier functions.php via l e9diteur d apparence. J ai inse9re9 le code fourni dans une balise de9je0 ouverte et meame en dehors, mais rien n y fait.J utilise actuellement le the8me weaver, est-ce que cela pourrait avoir un impact? A noter que le fichier functions.php modifie9 est celui du the8me weaver.Une ide9e ?

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