Gérer l'apparition de plusieurs divs en fonction d'un clic

Fermé
RomainCarlier - 17 févr. 2019 à 13:57
 RomainCarlier - 17 févr. 2019 à 19:42
Bonjour,

J'essaye de faire un petit configurateur dans lequel j'aimerai que mes divs de choix se comportent comme sur ce site : https://www.bugaboo.com/FR/fr_FR/strollers/cameleon3-plus/create

Au départ j'avais pensé à une fonction toggle, mais le problème c'est que je n'arrive à paramétrer d'une seule de mes 3 divs avec cette fonction.

En résumé et en rapport avec mon code, je voudrais que quand je clic par exemple sur h3 "Cadre", le div "cadre" s'ouvre ou se ferme et que les autres soient fermées, le tout avec un effet de déroulement, si possible.
Si le clic sur un autre titre, inversement.

Est ce que vous auriez une une idée de code à utiliser ?

Voici le code simplifié pour eviter d'avoir trop de lignes:

<!DOCTYPE html>
<html>


<head>
		<title>Configurateur</title>
		<meta charset="UTF-8">
		<link rel="stylesheet"  type="text/css" href="css/stylesconfigurateur.css">
	
</head>




<!-----------------------------------------------------BODY------------------------------------------------->

<body>

		<!---------------------------- Menu de navigation nav ---------------------------->
		<?php include 'menunavigation.php';  ?>

			
				<div class="configG" align="center" > 
						

						<h3 class="Cadre"> Cadre </h3>
						
						<div class="Cadre" > 
								<p> contenu </p>
						</div>
						
						
						
						
						<h3 lass="Roues"> Roues </h3>
						
						<div class="Roues" > 
								<p> contenu </p>
						</div>
						
						
						
						
						<h3 class="Poignees"> poignées </h3>
						
						<div class="Poignees" > 
								<p> contenu </p>
						</div>
		
				</div>
				
</body>

</html>


Merci d'avance !


Configuration: Windows / Chrome 72.0.3626.109
A voir également:

1 réponse

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
17 févr. 2019 à 17:44
Bonjour,

Déjà, ajoutes une class "bidon" à tes div qui servira de selecteur pour pouvoir toutes les masquer.
Ensuite, tu n'auras plus qu'à écrire ton code de la façon suivante :
- Masquer toutes les divs (ayant la class "bidon" )
- Afficher celle que tu souhaites.

Le script est facile à faire (et il en existe des miliers sur le net...)
Si tu n'y arrives pas... reviens nous voir avec ton code HTML modifié et le code JS que tu auras testé (ici on aide ... mais on ne fait pas le code à ta place )

0
RomainCarlier
17 févr. 2019 à 19:42
Bonjour,

merci pour la réponse, je vais avancer dans cette voie !
0