[Résolu] Afficher/Cacher plusieurs div

Bonjour à tous!
Je suis en plein codage de mon nouveau portfolio, et je me heurte à un problème, je m'explique :
J'ai une section "WORKS" dans laquelle est affichée plusieurs images. Je voudrais qu'au clique sur l'une d'elle, la div correspondante s'affiche (si action sur "work_1" afficher "show_1", etc...). Et si on clique sur une autre image, la div actuellement afficher ce cache pour laisser la place à la nouvelle.

J'ai eu bon chercher toute la matinée avec notre cher amis Google, mais je n'ai pas trouvé de script JS (ou de tutos pour le créer) qui me convenait... Etant un gros noob en JS je viens donc chercher votre aide ^^.

EDIT: J'ai finalement trouvé un script très simple qui remplis parfaitement ça fonction. Il ne me manque juste une chose, C'est l'action de cacher automatiquement une div "show_" déjà afficher quand on veut en afficher une autre. J'essais actuellement de le faire, mais sans résultats pour l'instant .

<section id="show">
	<div id="show_1" style="display:none;">
		<!-- contenu work_1 -->
	</div>
	<div id="show_2" style="display:none;">
		<!-- contenu work_2 -->
	</div>
	<!-- ETC... -->
</section>
		
<section id="works">
	<h1>WORKS</h1>

	<div id ="gal">
		<div id="work_1" onclick="toggle_div(this,'show_1');><a href="#show_1"><img src="min_work1.jpg" /></a></div>
		<div id="work_2" onclick="toggle_div(this,'show_2');><a href="#show_2"><img src="min_work2.jpg" /></a></div>
		<!-- ETC...... -->
	</div>

</section>

function toggle_div(bouton, id) {
  var div = document.getElementById(id);
  if(div.style.display=="none") { 
    div.style.display = "block";
  } else {
    div.style.display = "none";
  }
}

Modifié par X-F (03 Feb 2014 - 15:55)

Salut,

Je ne suis pas un spécialiste, mais avec un peu de jQuery, il doit y avoir moyen de faire ça assez facilement.

La première chose à faire, c'est au clic sur une de tes images dans la section Work, c'est de faire disparaître toutes les images de la section Show :

$('#show div').css('display','none');

Ensuite, tu n'as plus qu'à afficher le div qui t'intéresse, un truc de ce genre, à positionner sur chaque div 'work_' :

var strID = '#' + $(this).attr('id').replace('work','show');
$(strID).css('display','block');

Donc, en résumé, parce que je n'aime pas les onclick directement dans le HTML, un bout de javascript qui se déclenche une fois la page chargée, et qui vient positionner sur chaque "work_" une fonction affichant sa "show_" correspondante.

$(document).ready(function () {
 $('#works #gal div').click(function(){
   $('#show div').css('display','none');
   var strID = '#' + $(this).attr('id').replace('work','show');
   $(strID).css('display','block');
 });
}

Manu

Merci beaucoup pour ta réponse Manu !

Mais ton script nécessite d’appeler la libraire JQuery. Hors importer toute une librairie juste pour un effet m'embête un peu .

Je préférais rester sur un code JS indépendant.

Bonsoir,

Par rapport à votre remarque jQuery est tout de même assez léger. C'est le plus souvent un allié précieux surtout en ce qui concerne l'interopérabilité des navigateurs.

Pour résoudre votre problème je vous suggère de voir les choses autrement.
En effet il est possible au clic sur un élément work d'ajouter une classe CSS pour afficher appliquer un comportement.

Je me suis permis de modifier votre code :

<section id="show">
	<div id="show_1">
		show1
	</div>
	<div id="show_2">
		show2
	</div>
	<!-- ETC... -->
</section>	
<section id="works">
	<h1>WORKS</h1>

	<div id ="gal">
		<div id="work_1" onclick="toggle_div(this,'show_1')"><a href="#show_1"><img src="min_work1.jpg" /></a></div>
		<div id="work_2" onclick="toggle_div(this,'show_2')"><a href="#show_2"><img src="min_work2.jpg" /></a></div>
		<!-- ETC...... -->
	</div>
</section>

toggle_div = function(bouton, id) {
    var section = document.getElementById("show");
    var childSection = section.childNodes;
    for(var i = 0; i < childSection.length; i++){
        if(childSection[i].nodeType == 1){              childSection[i].className=childSection[i].className.replace("show","");
                                          if(childSection[i].id === id){
                                              childSection[i].className = childSection[i].className + "show";
                                          }
        }
        
        
        console.log(childSection[i].nodeType);
    }
  var div = document.getElementById(id);
}

Et le CSS approprié

#show div { display:none; }
#show .show { display : block; }

Une démo est disponible ici : http://jsfiddle.net/Tgt5L/

En espérant vous avoir apporté mon aide. [/i][/i][/i][/i][/i][/i][/i]

Merci beaucoup pour ta réponse TagadaGeo!
Je test cela dès que possible, pour te faire un retour.

salut,
tu pourrais faire plus simplement avec ta structure initiale

function addEvent(a,b,c,d){d = !d && false;(a.addEventListener)?a.addEventListener(b,c,d):a.attachEvent('on'+b,c);}

var workDivs = document.querySelectorAll("#gal>div"),
	showDivs = document.querySelectorAll("#show>div");

function toggle_div(e){
	var cur = e.target || e.srcElement,
		targetID = "show"+cur.id.substring(cur.id.lastIndexOf("_"));
	
	for(var i=0, l=showDivs.length; i<l; i++){
		showDivs[i].style.display = "none";
	}
	
	document.getElementById("targetID").style.display = "block";
}

for(var i=0, l=workDivs.length; i<l; i++){
	addEvent(workDivs[i], "click", toggle_div, false);
}

Le "display:none" n'est pas très bon pour l'accessibilité.
Il faut aussi faire attention si tu veux utiliser le code de TagadaGeo, penser à ajouter un espace avant pour la classe --> " show".

EDIT: le code n'a pas été testé[/i][/i]
Modifié par Zelalsan (06 Feb 2014 - 11:49)

Bonjour à tous!
Tout d'abord merci pour toutes vos réponses!
J'ai finalement réussi à me débrouillé tous seul.
Voici mon code final version simplifié pour ceux que ça pourrait aider. ^^

<section id="show">
	<div id="show_1" class="mask_element">
		<!-- contenu work_1 -->
                <a class="close_show rollover" onclick="fermer('show_1');" href="#works"></a>
	</div>
	<div id="show_2" style="display:none;">
		<!-- contenu work_2 -->
                <a class="close_show rollover" onclick="fermer('show_2');" href="#works"></a>
	</div>
	<!-- ETC... -->
</section>
		
<section id="works">
	<h1>WORKS</h1>

	<div id ="gal">
		<div id="work_1" onclick="toggle_div(this,'show_1');><a href="#show_1"><img src="min_work1.jpg" /></a></div>
		<div id="work_2" onclick="toggle_div(this,'show_2');><a href="#show_2"><img src="min_work2.jpg" /></a></div>
		<!-- ETC...... -->
	</div>
</section>

.mask_element {
    display: none;
}

function toggle_div(id) {
    var divs = document.getElementsByTagName('div');
    var id = document.getElementById(id);
    for(var no=0;no<divs.length;no++){
        if(divs[ no].className=='mask_element'){ // on cible les divisions dont la class est 'mask_element'
            divs[ no].style.display = "none"; // on les masque tous
        }
    } 
    id.style.display = "block"; // on affiche le div appelé
}

function fermer(id) {
    document.getElementById(id).style.display = "none"; //Fermeture de la div affiché via un bouton
}

Le résultat final est visible sur mon nouvea folio www.xavierfaudot.fr
Modifié par X-F (05 Mar 2014 - 11:21)