[RESOLU] Affichage DIV javascript

Bonjour à tous ! Je ne m'y connais pas beaucoup en JavaScript, et là, je galère sur une histoire d'affichage !

Je gère l'affichage d'individu, pouvant avoir de 1 à 4 "sous menu" à savoir : biographie, bibliographie, articles et voyages. Toutes les données viennent de ma base de données.

Cependant, si un individu n'a pas l'un de ces sous menu, il ne s'affiche pas.
Quand on clique sur l'image du sous menu, la div apparaît en dessous, quand on re-clique dessus elle disparaît et si elle est ouverte et qu'on clique sur une autre, elle se referme.

Voilà mon problème, quand l'individu à les 4 sous menus, tout se passe très bien. par contre s'il n'en a que 3, ou moins, la fonction qui fait se refermer les autres div ne fonctionne plus, et il affiche tant qu'on clique sur un nouveau menu.

Un peu de code pour vous aider à m'aider

Voilà les fonctions JavaScript que j'ai en début de code (elles sont toutes construites de la même manières) :

	function biographie() {
		if(document.getElementById('biographie').style.display=='block') {
			document.getElementById('biographie').style.display='none';
			document.getElementById('img1').innerHTML='<img src="images/biographie.png">';
		} else {
			document.getElementById('biographie').style.display='block';
			document.getElementById('img1').innerHTML='<img src="images/biographie_sur.png">';
			document.getElementById('articles').style.display='none';
			document.getElementById('img3').innerHTML='<img src="images/articles.png" style="margin:3px">';
			document.getElementById('voyages').style.display='none';
			document.getElementById('img4').innerHTML='<img src="images/voyages.png" style="margin:3px">';
			document.getElementById('bibliographie').style.display='none';
			document.getElementById('img2').innerHTML='<img src="images/bibliographie.png" style="margin:3px">';
		}
	}
	
	function bibliographie() {
		if(document.getElementById('bibliographie').style.display=='block') {
			document.getElementById('bibliographie').style.display='none';
			document.getElementById('img2').innerHTML='<img src="images/bibliographie.png" style="margin:3px">';
		} else {
			document.getElementById('bibliographie').style.display='block';
			document.getElementById('img2').innerHTML='<img src="images/bibliographie_sur.png" style="margin:3px">';
			document.getElementById('articles').style.display='none';
			document.getElementById('img3').innerHTML='<img src="images/articles.png" style="margin:3px">';
			document.getElementById('biographie').style.display='none';
			document.getElementById('img1').innerHTML='<img src="images/biographie.png">';
			document.getElementById('voyages').style.display='none';
			document.getElementById('img4').innerHTML='<img src="images/voyages.png" style="margin:3px">';
			
		}
	}
	
	function articles() {
		if(document.getElementById('articles').style.display=='block') {
			document.getElementById('articles').style.display='none';
			document.getElementById('img3').innerHTML='<img src="images/articles.png" style="margin:3px">';
		} else {
			document.getElementById('articles').style.display='block';
			document.getElementById('img3').innerHTML='<img src="images/articles_sur.png" style="margin:3px">';
			document.getElementById('biographie').style.display='none';
			document.getElementById('img1').innerHTML='<img src="images/biographie.png">';
			document.getElementById('voyages').style.display='none';
			document.getElementById('img4').innerHTML='<img src="images/voyages.png" style="margin:3px">';
			document.getElementById('bibliographie').style.display='none';	
			document.getElementById('img2').innerHTML='<img src="images/bibliographie.png" style="margin:3px">';
		}
	}
	
	function voyages() {
		if(document.getElementById('voyages').style.display=='block') {
			document.getElementById('voyages').style.display='none';
			document.getElementById('img4').innerHTML='<img src="images/voyages.png" style="margin:3px">';
		} else {
			document.getElementById('voyages').style.display='block';
			document.getElementById('img4').innerHTML='<img src="images/voyages_sur.png" style="margin:3px">';
			document.getElementById('articles').style.display='none';
			document.getElementById('img3').innerHTML='<img src="images/articles.png" style="margin:3px">';
			document.getElementById('biographie').style.display='none';
			document.getElementById('img1').innerHTML='<img src="images/biographie.png">';
			document.getElementById('bibliographie').style.display='none';	
			document.getElementById('img2').innerHTML='<img src="images/bibliographie.png" style="margin:3px">';
		}
	}

Au niveau du code voilà comment ça se passe :

// BIOGRAPHIE
if ($biographie != '') {
    echo '<td align="center" height="30px" style="cursor:pointer;" onclick="biographie()" id="img1">
    <img src="images/biographie.png" onmouseover="this.src=\'images/biographie_sur.png\'" onmouseout="this.src=\'images/biographie.png\'"  />
    </td>' ;
  }

// ARTICLES
$sqlA = "SELECT * FROM article WHERE ID_animateur='$id'";
$reqA = mysql_query($sqlA) or die('Erreur SQL !<br>'.$sqlA.'<br>'.mysql_error());
if (mysql_num_rows($reqA) >= 1) {
      echo '<td align="center" height="30px" style="cursor:pointer;" onclick="articles()" id="img3">
    <img src="images/articles.png" style="margin:3px" onmouseover="this.src=\'images/articles_sur.png\'" onmouseout="this.src=\'images/articles.png\'" onclick="imagearticles()" />
	</td>';
}

// VOYAGES
$sqlV = "SELECT * FROM voyage WHERE ID_animateur='$id'";
$reqV = mysql_query($sqlV) or die('Erreur SQL !<br>'.$sqlV.'<br>'.mysql_error());
 if (mysql_num_rows($reqV) >= 1) {
     echo '<td align="center" height="30px" style="cursor:pointer;" onclick="voyages()" id="img4">
    <img src="images/voyages.png" style="margin:3px" onmouseover="this.src=\'images/voyages_sur.png\'" onmouseout="this.src=\'images/voyages.png\'" />
</td>';
}
							
// BIBLIOGRAPHIE
$sqlB = "SELECT * FROM bibliographie WHERE ID_animateur='$id'";
$reqB = mysql_query($sqlB) or die('Erreur SQL !<br>'.$sqlB.'<br>'.mysql_error());
if (mysql_num_rows($reqB) >= 1) {
     echo '<td align="center" height="30px" style="cursor:pointer;" onclick="bibliographie()" id="img2">
    <img src="images/bibliographie.png" style="margin:3px" onmouseover="this.src=\'images/bibliographie_sur.png\'" onmouseout="this.src=\'images/bibliographie.png\'" />
   </td>';
}

Et ensuite les div qui affichent les différents résultats (je vous passe le contenu)

<div id="biographie" style="display:none; margin:40px 0 0 0;">  
</div> 

<div id="bibliographie" style="display:none; margin:40px 0 0 0;" >  
</div>  

<div id="articles" style="display:none; margin:40px 0 0 0;" >
</div>

<div id="voyages" style="display:none; margin:40px 0 0 0;" >  
</div>

Est-ce que quelqu'un a une idée sur ce qui le fait planter ?
Modifié par louloute (05 Aug 2011 - 16:04)

Bonjour,
Les objets identifiés par 'img1' à 'img4' ne sont apparement pas toujours présent, mais tu fais toujours un innerHTML dessus.

Je pense que tu devrai modifier chaque ligne du genre :

document.getElementById('img1').innerHTML='<img src="images/biographie.png">';

par

if (document.getElementById('img1'))
{
document.getElementById('img1').innerHTML='<img src="images/biographie.png">';
}

Afin de ne faire d'innerHTML que sur des objets existants.

Ou un truc du genre...

Ahh merveilleux

Je pensais bien à un truc dans ce style, mais je voulais à tout prix mettre 'document.getElementById('img1') = 'qqch' ! Alors qu'il n'y a pas besoin !

Merci beaucoup, problème résolu