18008 sujets

Questions générales et questions de débutants

[Résolu] Fermer une div quand une autre s'ouvre

Bonjour,

Je suis débutant en développement web et je me tourne vers la communauté pour m'aider.
Voici mon problème :
J'ai une image avec des zones de cliquage, et à chaque zone est associé un paragraphe. Ce que je souhaite c'est que :
1) Quand j'arrive sur ma page les paragraphes soient cachés (Résolu)
2) Quand je clique sur une zone j'ai son paragraphe qui s'affiche (Résolu)
3) Quand je clique sur une autre zone, le paragraphe de la zone en question s'affiche, tout en cachant le paragraphe de l'autre zone (Là est mon problème)

Pour le moment j'arrive seulement à afficher et cacher une seule zone en cliquant deux fois dessus.

Voici mon code jquery : 

	<script>
			$(document).ready(function(){
					$('#zone_1').click(function(){
							$('#Equipement').toggle();
					});
			});
$(document).ready(function(){
					$('#zone_2').click(function(){
							$('#Equipement2').toggle();
					});
			});
	</script>


Et le html : 

<body>
	<section class="container-fluid baie">
		<div class="container">
			<img src="../../img/Travée_A/Baie_A3.png" alt="Maquette Baie A3" usemap="#Baie_A3" />

			<map name="Baie_A3">
				<area id="zone_1" shape="rect" coords="88,96,329,105" alt="Equipement" title="Equipement"/>
				<area id="zone_2" shape="rect" coords="88,105,329,115" alt="Equipement2" title="Equipement2"/>
			</map>
		</div>
	</section>
	<section class="container-fluid detail">
		<div class="container">
			<div id="Equipement_1" style="display:none">
				<h3> Equipement </h3>
				<p>Lorem ipsum</p>
			</div>
		</div>
    <div id="Equipement_1" style="display:none">
      <h3> Equipement2 </h3>
      <p>Lorem ipsum</p>
    </div>
	</section>


Comme dit plus haut, j'arrive a afficher/cacher les deux zones mais une au dessus de l'autre. Or je souhaiterai que l'une prenne la place de l'autre. Voila, je me tourne vers vous et vous remercie par avance.

Bonne journée !
TD
Modifié par Thib4udO (17 Apr 2019 - 16:03)
Salut

Remarque concernant ton script 
<script>
			$(document).ready(function(){
					$('#zone_1').click(function(){
							$('#Equipement').toggle();
					});
			});
                       $(document).ready(function(){
					$('#zone_1').click(function(){
							$('#Equipement2').toggle();
					});
			});
	</script>


Equivaut à ça : 

<script>
			$(document).ready(function(){
					$('#zone_1').click(function(){
							$('#Equipement').toggle();
							$('#Equipement2').toggle();
					});
			});
	</script>
Salut

Merci pour ton retour. Je me suis trompé, dans le copier/coller c'est d'abord "zone_1" puis après c'est "zone_2".

Du coup la solution que tu proposes n'est plus viable, si ?
Tu feras gaffe à ton HTML aussi 
<div class="container">
	<div id="Equipement_1" style="display:none">
		<h3> Equipement </h3>
		<p>Lorem ipsum</p>
	</div>
</div>
<div id="Equipement_1" style="display:none">
	<h3> Equipement2 </h3>
	<p>Lorem ipsum</p>
</div>


L'indentation est méga importante!
1 - on voit dessuite que tu ferme ta div "contenaire" après ton ta div "Equipement_1". est ce un choix que la div contenaire soit fermer avant la deuxième div d'équipement ?
2 - les deux div "Equipement" on le même ID qui est id="Equipement_1" ce qui est très déconseiller car un ID est là pour être UNIQUE! donc soit tu passe par des "class" soit tu les rend unique.
3- Dans ton javascript tu utilise deux .toggl()
$('#Equipement').toggle();
$('#Equipement2').toggle();
Donc pour le premier l'id "Equipement" n'existe pas tu n'as qu'un seul ID qui est "Equipement_1".

Corrige ça et vois si tu as des problème encore après Smiley smile
Oulah oui j'avais pas vu toutes ces erreurs.
Voila les codes après correction :
Jquery :

	<script>
			$(document).ready(function(){
					$('#zone_1').click(function(){
							$('#Equipement').toggle();
					});
          $('#zone_2').click(function(){
							$('#Equipement2').toggle();
					});
			});
	</script>


html :

	<section class="container-fluid baie">
		<div class="container">
			<img src="D:/STAGE/Site_Web/img/Travée_A/Baie_A3.png" alt="Maquette Baie A3" usemap="#Baie_A3" />

			<map name="Baie_A3">
				<area id="zone_1" shape="rect" coords="88,96,329,105" alt="Equipement" title="Equipement"/>
				<area id="zone_2" shape="rect" coords="88,105,329,115" alt="Equipement2" title="Equipement2"/>
			</map>
		</div>
	</section>
	<section class="container-fluid detail">
		<div class="container">
			<div id="Equipement" style="display:none">
				<h3> Equipement </h3>
				<p>Lorem ipsum</p>
			</div>
		
      <div id="Equipement2" style="display:none">
        <h3> Equipement2 </h3>
        <p>Lorem ipsum</p>
      </div>
    </div>
	</section>


Le fait que la div "container" soit fermé avant était une erreur et le nom des id je sais aussi. Erreur du à la non correction de mon copier/coller. Normalement tout est réglé à ce niveau.
Merci pour tes corrections.

Désormais quand je clique sur mes zones, les paragraphes se mettent les uns au dessus des autres.
Maintenant comment pourrais-je faire pour que quand je clique sur zone_2, le paragraphe de zone_1 disparaisse pour laisser la place à celui de zone_2 ?
Thib4udO a écrit :

Maintenant comment pourrais-je faire pour que quand je clique sur zone_2, le paragraphe de zone_1 disparaisse pour laisser la place à celui de zone_2 ?


En le codant Smiley smile

en gros 

if($("#zone_1).is(:visible)){
  $("#zone_1).hide();
}


à mettre dans ton click "zone_2".
Quand tu dis "dans ton click zone_2", c'est ou exactement ? Car quand je le met quelque part "click" devient rouge.
$('#zone_2').click(function(){
$('#Equipement2').toggle();
});


Ici tu as un ".click()" sur l'id "zone_2" donc dedans
Oui j'ai oublier les guillemet j'ai codé à l'arrache : 

if($("#zone_1").is(:visible)){
  $("#zone_1").hide();
}
ton code est testable quelque part ? Smiley smile sinon copie ton code de nouveau, pour voir l'évolution et les potentielles erreurs.
Modifié par JENCAL (17 Apr 2019 - 16:43)
Je suis désolé mon code n'est pas testable. Par contre oui je peux te mettre ce que j'ai fais.
J'ai testé plusieurs choses mais ce n'est pas concluant.

  <script>
			$(document).ready(function(){
					$('#zone_1').click(function(){
							$('#Equipement').toggle();
					});
          $('#zone_2').click(function(){
            if($("#zone_1").is(:visible)){
  $("#zone_1").hide();
}
							$('#Equipement2').toggle();
					});
			});
	</script>
Ca y est ca fonctionne, j'ai trouvé l'erreur et si ca se trouve ton code était bon depuis le début.

La ligne :

			$(document).ready(function(){


faisait faire n'importe quoi. Je l'ai supprimé et ca fonctionne.

Merci beaucoup!
Modifié par Thib4udO (17 Apr 2019 - 16:59)
Sujet clos
Aller à