Piloter agrandissement de div avec jquery

bonjour,

je tourne en rond depuis un moment, voila mon problème.

dans une page web, j'ai plusieurs DIVs empilés contenant du texte dont la quantité est variable.
je limite la hauteur de ces divs au départ (height:162px) et je cache ce qui déborde (overflow:hidden).

à la suite du div, je rajoute un paragraphe contenant ( lire la suite ... ) et si on clique sur ce paragraphe, le div prend sa hauteur (height:auto), voici le code js

		
 var ouvert = false, ferme = true;  

             $('.expand-1').click(function()  {
			if (ouvert) {
			  ouvert = false;
			  ferme =true;
			  $(this).text("lire la suite ...");
			  $(this).prev('div').css("height","162px");
			}  else if (ferme) {
			  ouvert = true;
			  ferme =false;
			  $(this).text("replier ...");
			  $(this).prev('div').css("height","auto");
			}
		});

.expand-1 est le paragraphe sur lequel on clique
je joue avec 2 variables (ouvert et ferme) pour faire changer le contenu du paragraphe en fonction du contexte.

Le problème ... c'est que si je veux ouvrir un autre div sans avoir fermé le précédent, la variable "ouvert" vaut "true" et donc mon 1er nouveau click sur le paragraphe est inopérant puisqu'en fait il me ferme un div déjà fermé..

y a un moyen de contourner ça???
Modifié par lionel_css3 (11 Mar 2012 - 15:54)

Il faut croire que poster sur le forum m'a stimulé puisque j'ai trouvé une solution.... mais je la trouve un peu bâtarde, y a vraiment pas plus simple????

		$('.expand-1').click(function()  {
			var $prevDiv = $(this).prev('div');
			var hauteurDiv = $prevDiv.css("height");
			var maValeur = "162px";
			
			if (hauteurDiv > maValeur ) {  // déjà ouvert
			  $(this).text("lire la suite ...");
			  $prevDiv.css("height", maValeur);     //  on réduit
			}  else if (hauteurDiv == maValeur) {  //  état initial ou état fermé
			  $(this).text("replier ...");
			  $prevDiv.css("height","auto");         //  on ouvre le div au maximum
			}
		});