• Accueil
  • Entreprendre
    • Communiquer sur le web
  • Programmation
    • WLangage
    • HTML / CSS
    • PHP / MYSQL
    • Javascript
    • Jquery : enrichissez vos pages webs !
    • Utilisation de CK Editor
  • Votre Ordi
    • Mieux utiliser son PC
  • Systèmes
    • Sécurisation de vos systèmes informatiques
    • Virtualisation
  • 'Geekeries'
    • Outils de développement
    • On aime
Accueil > Programmation > Jquery : enrichissez vos pages webs ! > Afficher/ Masquer du contenu html via jQuery
Tags
MYSQL   SEO   PHP   Création de site web   IpTables   Alixo   CSS   word   Notepad++   Google   office 2007   Réseau   SSL   optimisation   VMware   Autorité de certification   Accusé réception   mail   Compte utilisateur   Windows XP   Nowwweb.com   WD   Sécurisation   disque virtuel   Référencement   WD16   CK EDITOR (utilisateurs)   OpenSSL   Jquery   Windows7  

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