Bonjour,

J'ai a mettre en place un menu qui affiche ou masque une balise <div> dans lequel sera incorporé une liste.

J'utilise donc une fonction javascript :

function affiche(object_id){
 var obj=document.getElementById(object_id)	
 if(obj.style.display == 'block')
  obj.style.display='none'
 else
  obj.style.display='block'
 }

J'ai deux liens qui me permettent d'afficher deux menus différents comme ceci :

<a href="javascript:affiche('works')">Works</a> _ 
<a href="javascript:affiche('infos')">Infos</a>
<!-- Ce qui affiche la div suivante -->
<div id="works" class="menu">
</div>
<!-- ou bien celle-ci : -->
<div id="infos" class="menu">
</div>

Le bloc menu est paramètré en css comme ci dessous :

.menu {
	display:none;
	position:absolute;
	height:100%;
	width:344px;
	background-color:#fff;
}
.menu ul {
/* etc. */
}

Mon problème est que lorsque j'ouvre les deux divs, celles ci restent ouvertes. J'aimerais alors que si la première (works) est ouverte, et que j'ouvre la deuxième div (infos), la première se ferme (works).

Je pense que je dois modifier mon javascript, pouvez-vous m'aider ?

Par ailleurs, je crois que ça n'est pas faisable en css pur, pouvez-vous me le confirmer ?

Merci.

Edit :
Je cherche en faite à faire un menu comme celui-ci :
http://www.carusostjohn.com/

Si quelqu'un peu me donner une info de comment il est construit je suis preneur !

Personellement la technique que j'ai employé (j'ai fais le même genre de script il y a 2h ), c'était lors de l'appel de la fonction affiche, caché l'ensemble des éléments, pour que l'élément s'affiche sans que rien ne soit ouvert.

Deux moyens, caché tout les div, ou récupérer la class (pour les cachés) :

var divEns = document.getElementsByTagName("div"); // récupère tout les div
	for (i=0; i< divEns.length; i++){ // boucle dépendant du nombre de div
		divEns[i].style.display = "none"; // cache l'élément
	}

var ensemble = document.getElementsByClassName("mesDiv"); // récupère l'ensemble de div avec la class
        for( i=0; i < ensemble.length; i++){
                ensemble[i].style.display = "none";
                }

Bonne continuation .

Salut,
merci de ta réponse !

J'ai tenté d'adapter ton script mais je n'arrive pas à mes fins...

J'utilise donc ce script :

var ensemble = document.getElementsByClassName("menu"); // récupère l'ensemble de div avec la class
        for( i=0; i < ensemble.length; i++){
                ensemble[i].style.display = "none";
                }

Puisque je ne peux pas cacher tous mes divs (on ne voit plus rien après ^^).

Mais avec la boucle il me referme le menu aussitôt ouvert. Ne peux-t-on pas faire en sorte que si l'un s'ouvre, il vérifie que si l'autre est aussi ouvert il le ferme et sinon il s'ouvre sans rien faire ?

Du genre :

switch (object_id)
 			case works:
 				var autre=document.getElementById('infos')
   				if (autre.style.display == 'block')
   					autre.style.display='none'
   			break;
   			case infos:
   				var autre=document.getElementById('works')
   				 if (autre.style.display == 'block')
   					autre.style.display='none'
   			break;

Enfin, ça ne marche pas...

Pour mon script il suffit de le mettre avant d'afficher la partie :

var ensemble = document.getElementsByClassName("menu"); // récupère l'ensemble de div avec la class
        for( i=0; i < ensemble.length; i++){
                ensemble[i].style.display = "none";
        }

var cate = document.getElementById(categorie);
	cate.style.display = "block";

(tester chez moi et c'était plutôt efficace)
Mais si tu veux savoir qui est ouvert, et refermer celui qui l'est c'est un peu plus compliquer, je pense que quelque chose comme ça pourait marcher :

var ensemble = document.getElementsByClassName("menu");
	for (i=0; i< ensemble.length; i++){
		if(ensemble[i].style.display == "block") // vérifit l'élément de l'ensemble
		{
			ensemble[i].style.display = "none";
		}
	}

Sinon il y aurait moyen de reprendre le précédent code, et de vérifier non pas le style, mais simplement une value ou un name (mais avec un div pas vraiment réalisable :/ ).
J'espère t'avoir aider, si c'est pas le cas qu'un autre le puisse .

Edit : commentaire qui collait pas trop .

Oui mais vu que je n'ai que deux divs à afficher ou à masquer, je n'ai nullement besoin de boucles, non ?

N'est-ce pas possible de dire que lorsque la div avec l'id "works" il faut cacher la div avec l'id "infos" et inversement ?
Désolé mais mon javascript laisse encore beaucoup à désirer :P.

Edit (ajout de l'adresse)
Pour voir comment est le menu :
http://test.thefolder.powa.fr/

Pense-tu qu'en utilisant autre chose que des divs, cela est possible ?

Sinon faut-il que je change mon script de base ?

<style>
/* cache dès le début les div */
.menu
{
	display:none;
}
</style>

<a href="javascript:affiche('works')">Works</a> _ 
<a href="javascript:affiche('infos')">Infos</a>

<!-- Ce qui affiche la div suivante -->
<div id="works" class="menu">
</div>

<!-- ou bien celle-ci : -->
<div id="infos" class="menu">
</div>

<script type="text/javascript">
// fonction pour caché l'objet
function hide(objet)
{
	var obj = document.getElementById(objet);
	obj.style.display = "none";
}

// fonction pour l'afficher
function show(objet)
{
	var obj = document.getElementById(objet);
	obj.style.display = "block";
}

function affiche(type)
{
        //selon la valeur transmise affiche works / cache infos
	if(type == "works")
	{
		hide("infos");
		show("works");
	}
	else if(type == "infos")
	{
		hide("works");
		show("infos");
	}
}

</script>

Je l'ai testé et le code tel qu'elle fonctionne, en espérant que ce coup si je me sois pas tromper .

PS : j'ai mis des fonctions pour que ce soit plus clair, et plus pratique. Si tu as dans l'idée de faire 3 ou 4 div, il te serons utile. Mais dans le cas ou tu en aurais beaucoup ou un nombre indéterminé, je te conseil de faire la méthode de tous les cachés (cf mes précédents post).

Ouah merci !

Ca m'a l'air de fonctionner à merveilles, mais maintenant il n'est plus possible de fermer le menu (cacher la div), pour revenir à mon texte initial...

Je continue à chercher ;).

Ah oui, j'avais oublié ce détail, tu peux facilement l'ajouter .

function affiche(type)
{
    //selon la valeur transmise affiche works / cache infos
	if(type == "works")
	{
		hide("infos"); // cache dès le début infos
                
		var div = document.getElementById("works");
		if(div.style.display == "none") // si le div actuel est caché
		{
			show("works"); // on l'affiche
		}
		else
		{
			hide("works"); // sinon le cache	
		}
	}
	else if(type == "infos")
	{
		hide("works");
		
		var div = document.getElementById("infos");
		if(div.style.display == "none")
		{
			show("infos");
		}
		else
		{
			hide("infos");
		}
	}
}

J'ai essayé de faire de manière "clair", par contre pas pu le tester j'espère pas avoir laisser des erreurs. Mais ça devrait marcher .

Un GRAND merci à toi !! Si tu as besoin de quelconque script en php demande moi !

A bientôt je l'espère ! (je vais me mettre sérieusement au javascript :P)

Pas de problème, mais met toi au Js, ça fait une semaine et je suis déjà accro .
(Bon reste encore l'Ajax / le Jquery, après le Js et le Dom ).

Ps : oublie pas de mettre ton sujet comme valider, sauf s'il reste encore des problèmes.
Edit : j'avais pas vu que c'était déjà le cas