Nous avons vu dans l’article « Utilisation de JQuery pour soumettre un formulaire » comment utiliser le framework javascript JQuery pour soumettre un formulaire en utilisant l’ajax. Dans ce nouvel article on va voir comment ouvrir un div.

Pour ce nouvel exemple nous reprenons l’exemple précédent.

Inventaire des fichiers

L’exemple sera composé de 3 fichiers:

  • Le formulaire (index.php)
  • Traitement javascript (ajax.js)
  • Le fichier PHP de traitement (action.php)

Syntaxe HTML

Voici les lignes ajoutées après le bouton connexion du fichier index.php.

</pre>
<h3 class="collapse">Besoin d'aide cliquez-ici</h3>
<div class="content">
<ul>
	<li>Saisissez votre identifiant dans la première zone</li>
	<li>Saisissez votre mot de passe dans la deuxième zone</li>
	<li>Cliquez sur le bouton connexion</li>
</ul>
</div>
<pre>

Ce qui est important dans ces quelques lignes sont les classes collapse et content. On va mieux le comprendre en regardant le code javascript qu’il faut ajouter dans le fichier _js/ajax.js.

Syntaxe Javascript

Après les lignes suivantes après la fonction Ready

jQuery(".content").hide();
jQuery(".collapse").click(function()
{
    jQuery(this).next(".content").slideToggle(500);
});

Ces deux indiquent que par défaut l’élément html ayant la classe content est caché. Et lors du clique du l’élément html ayant la classe collpase, affiche l’élement suivant ayant la classe content.

Syntaxe CSS

Et juste quelque ligne de présentation ajoutée dans le fichier exemple.css

.content {
    border:2px solid #DDDDDD;
    margin-bottom:1em;
    padding:0.8em;
    background:none repeat scroll 0 0 #E6EFC2;
    border-color:#C6D880;
    color:#264409;
}

Visuels

Le formulaire avant le clique sur l’aide

Le formulaire après avoir cliqué sur le div

En cliquant de nouveau sur l’aide le texte se ferme.

Fichiers et liens

Vous trouverez un zip de l’exemple

Voici la liste des différents liens qui peuvent aider à approfondir le sujet: