Partage

Afficher/Masquer différentes div à la même id

Sujet résolu
14 septembre 2017 à 12:11:10

Bonjour tout le monde je reposte le sujet après qu'il est été déclaré comme spam, pourquoi je ne sais pas :(

La situation : Je développe un petit site web de gestion pour une entreprise. Après avoir fait la barre de recherche et l’affichage des résultats j'aimerais maintenant pouvoir afficher des informations sur chaque résultat sans rechargement de page bien sur. Donc voici l'affichage des résultats

 Voici mon code

<?php
while ($donnees = $reponse->fetch())
	{
			/* >> AFFICHAGES DES RÉSULTATS << */
			echo '<h3>visite ' . ($test + 1) . '</h3>';
			?>
			<table border>
				<tr>
					<td><?php echo $donnees['Nom']; ?></td>
					<td><?php echo $donnees['Prenom']; ?></td>
					<td><?php echo $donnees['Adresse']; ?></td>
					<td><?php echo $donnees['NumeroIsadom']; ?></td>
					<td><?php echo $donnees['TypeVisite']; ?></td>
					<td><?php echo $donnees['HeureDebut']; ?></td>
					<td><?php echo $donnees['HeureFin']; ?></td>
					<td><?php echo $donnees['Absence']; ?></td>
					<td><?php echo $donnees['Telesuivi']; ?></td>
				</tr>
			</table>
			<div id="afficher">
			<div id="masquer">
				<a href="#afficher" class="afficher">Afficher</a><a href="#masquer" class="masquer">Masquer</a>
				<!-- >> AFFICHAGE DES INFORMATIONS COMPLEMENTAIRES << -->
				<p id="description">										
					<table border>
						<tr>
							<th>Matériel médical présent</th>
							<th>Matériel médical livré</th>
							<th>Matériel médical retiré</th>
							<th>Consommable médical présent</th>
							<th>Consommable médical livré</th>
							<th>Consommable médical retiré</th>
							<th>Duréée d'utilisation</th>
							<th>Commentaire</th>
							<th>Message</th>
							<th>Signature</th>
						</tr>
						<tr>
							<td><?php echo $donnees['MmPrésent']; ?></td>
							<td><?php echo $donnees['MmLivré']; ?></td>
							<td><?php echo $donnees['MmRetiré']; ?></td>
							<td><?php echo $donnees['CmPrésent']; ?></td>
							<td><?php echo $donnees['CmLivré']; ?></td>
							<td><?php echo $donnees['CmRetiré']; ?></td>
							<td><?php echo $donnees['DuréeUtilisation']; ?></td>
							<td><?php echo $donnees['Commentaire']; ?></td>
							<td><?php echo $donnees['Message']; ?></td>
							<td><?php echo $donnees['Signature']; ?></td>
						</tr>
					</table></p>
				</div>
				</div>
				<?php
				$test++;
				?><br /><?php
	}
?>	

CSS

#description {
   display:none;
}
#afficher:target #description {
   display:block
}
.masquer {
   display:none;
}
#afficher:target .masquer {
   display:inline;
}
#afficher:target .afficher {
   display:none;
}

Le problème : lorsque je clique sur "afficher" en dessous de n'importe quel résultat, uniquement les informations du premier résultat s'affiche.

 J'ai éssayé plein de solution même en js mais toujours ce résultat ou un autre résultat que j'ai eu :  toute les informations s'affichaient en même temps et se masquaient en même temps. Je suppose que le problème vient que mon css s'applique toujours sur les même id, mais comme je travail dans une boucle je ne vois pas comment changer d'id.

En esperant que quelqu'un pourra m'apporter de l'aide,

Merci

-
Edité par DanielRahmeh1 14 septembre 2017 à 17:09:32

14 septembre 2017 à 14:20:20

Salut,

oui toutes tes boucles créent les mêmes blocs div, suffit de rajouté un paramètre ex id= #afficher.$test.

je te rappel qu'un ID est unique

-
Edité par 1nsan3 14 septembre 2017 à 14:23:47

14 septembre 2017 à 17:08:56

Merci de ta réponse mais finalement j'ai réussis à régler le problème grace à ça :) :   https://openclassrooms.com/forum/sujet/js-probleme-avec-l-animation-afficher-masquer j'ai modifié un peu ce qui été donné pour que ça fonctionne dans ma boucle.

A plus

-
Edité par DanielRahmeh1 14 septembre 2017 à 17:10:11

Afficher/Masquer différentes div à la même id

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown