[OK] Lien qui affiche une <div> + passe à l'état "actif&qu

Bonjour tout le monde,

Ce que je cherche à faire est relativement simple :
- J'ai des liens qui permettent d'afficher une <div> au clique (plusieurs liens pour une même <div>).
- Un clique sur un lien doit également ajouter une classe "actif" sur celui-ci.
- En cliquant sur un lien déjà "actif" on masque la <div> et on supprime la classe.
- En cliquant sur un autre lien, et si la <div> est déjà affichée, on supprime l'état "actif" du précédent lien pour le mettre sur l'actuel et on recharge le contenu de la <div> (cette partie là ne me concerne pas, ce sera fait par quelqu'un d'autre, de plus il faudra sans doute ajouter un paramètre supplémentaire à la fonction).

Contrainte : les liens ne sont pas identifiés.

Voici ce que j'ai déjà fait :

<a onclick='javascript:display("boite_show_infos", this);'>Lien 1</a>
<a onclick='javascript:display("boite_show_infos", this);'>Lien 2</a>

<div id="boite_show_infos">
	[...]
</div>

var derniere_boite_ouverte = new Object();

function display(calque, element)
{	
	if(derniere_boite_ouverte == OBJET VIDE) // L'utilisateur n'a encore rien ouvert -> on affiche la <div>
	{
		document.getElementById(calque).style.display = "block";
		element.className = 'actif'; // On ajoute la classe "actif" sur le lien

		derniere_boite_ouverte = element; // On mémorise
	}
	else // Une boite est déjà ouverte
	{
		if(derniere_boite_ouverte == element) // Si c'est la même que précédemment -> on la ferme
		{
			document.getElementById(calque).style.display = "none";
			element.className = element.className.replace('actif',''); // On supprime la classe "actif" sur le lien

			derniere_boite_ouverte = OBJET VIDE; // On re-initialise
		}
		else // C'est une autre -> on recharge les données à l'intérieur + on met à jour l'état "actif"
		{
			/* 
				Ici le code pour mettre à jour le contenu de la <div>
			*/
		
			// On supprime l'état actif de l'ancienne boite et on l'affecte à la nouvelle
			derniere_boite_ouverte.className = derniere_boite_ouverte.className.replace('actif','');
			element.className = 'actif';

			derniere_boite_ouverte = element; // On mémorise
		}
	}
}

Je n'ai pas réussi à trouver le test adéquat pour savoir si l'objet "derniere_boite_ouverte" est vide. En fait, je galère tout court avec la manipulation des objets...

Je ne suis pas contre non plus un peu d'optimisation en jQuery.

Merci à vous.
Modifié par BeliG (14 Nov 2009 - 11:46)

Je pense avoir résolu mon problème.

Là où ça bloquait :

- Déclaration de l'objet :

var derniere_boite_ouverte;

/*au lieu de :

var derniere_boite_ouverte = new Object();*/

-Test du contenu de l'objet :

if(derniere_boite_ouverte == undefined)

Le script final (pour le même code XHTML) :

var derniere_boite_ouverte;

function display(calque, element)
{	
	if(derniere_boite_ouverte == undefined) // L'utilisateur n'a encore rien ouvert -> on affiche la <div>
	{
		document.getElementById(calque).style.display = "block";
		element.className = 'actif'; // On ajoute la classe "actif" sur le lien
		
		derniere_boite_ouverte = element;
	}
	else // Une boite est déjà ouverte
	{
		if(derniere_boite_ouverte == element) // Si c'est la même que précédemment -> on la ferme
		{
			document.getElementById(calque).style.display = "none";
			element.className = element.className.replace('actif',''); // On supprime la classe "actif" sur le lien
			
			derniere_boite_ouverte = undefined;
		}
		else // C'est une autre -> on recharge les données à l'intérieur + on met à jour l'état "actif"
		{
			/* 
				Ici le code pour mettre à jour le contenu de la <div> en Ajax
			*/
		
			// On supprime l'ancien l'état actif de l'ancienne boite et on l'affecte à la nouvelle
			derniere_boite_ouverte.className = derniere_boite_ouverte.className.replace('actif','');
			element.className = 'actif';
			
			derniere_boite_ouverte = element;
		}
	}
}

Maintenant, si vous voyez une autre façon de faire ou si vous avez des améliorations à apporter à mon script, on en discute avec plaisir ! (je laisse ouvert le sujet encore un peu)