Afficher et cacher des div avec id d'une bdd

Version imprimable

Bonjour à tous et à toutes,

J'aurai besoins de votre aide pour faire évoluer un script js que j'utilise pour afficher et cacher une div lorsque l'on clique sur un bouton.

Pour le moment se script fonctionne avec un id unique du div et je voudrais qu'il puisse fonctionner avec des id dynamique ou l'id viendrait de ma bdd.

Voici le script fonctionnel actuel sur un id nommé.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php
echo'<div class="bttn_unite fl"><a href="#detail" title="Plus de détail"><span onclick="afficher_cacher("detail");">Plus de détail</span></a></div>';
 
echo'<div id="detail"><strong>Déscription :</strong> '.stripslashes(trim($resultats['description_long'])).'</div>';
?>
 
<script>afficher_cacher('detail');
			function afficher_cacher(id)
			{
				if(document.getElementById(id).style.visibility=="hidden")
				{
					document.getElementById(id).style.visibility="visible";
					document.getElementById(id).style.display = "block";
					document.getElementById('bouton_'+id).innerHTML='Cacher';
				}
				else
				{
					document.getElementById(id).style.visibility="hidden";
					document.getElementById(id).style.display = "none";
					document.getElementById('bouton_'+id).innerHTML='Afficher';
				}
				return true;
			}</script>

Pour la modif du code php je ferais ça

Code:

1
2
3
4
5
6
<?php
echo'<div class="bttn_unite fl"><a href="#detail'.intval($resultats['id']).'" title="Plus de détail"><span onclick="afficher_cacher("detail'.intval($resultats['id']).'");">Plus de détail</span></a></div>';
 
echo'<div id="detail'.intval($resultats['id']).'">
                                                        <strong>Déscription :</strong> '.nl2br(stripslashes(trim($resultats['description_long']))).'</div>';
?>

mais pour le js je n'en ai aucune idée.

Si quelqu'un pouvait m'aider ça serait cool.

Merci d'avance.

Bonjour,

T'es sûr que cette ligne onclick="afficher_cacher("detail");" fonctionne sans erreur ?:roll:, l'as-tu testé ?

Eh ben je ne suis pas sûr, puisque l'erreur Uncaught SyntaxError: Unexpected end of input s'affiche dans la console du navigateur et bloque même le script.

La correction est d'échapper l'apostrophe ' coupant la chaine de caractère avec antislash "\" dans le paramètre de la fonction afficher_cacher(id) :
echo '<... onclick="afficher_cacher(\'detail'.trim(intval($resultats["id"])).'\')">';.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
 
<?php
 
/* Parcourir le résultat avec PDO : */
while($resultats=$stmt->fetch(PDO::FETCH_ASSOC)){
echo'<div class="bttn_unite fl">
		<a href="#detail'
		.intval($resultats['id']).'" title="Plus de détail"><span onclick="afficher_cacher(\'detail'.trim(intval($resultats["id"])).'\')">Plus de détail</span>
		</a>
		<button id="bouton_detail'.trim(intval($resultats['id'])).'" onclick="afficher_cacher(\'detail'.trim(intval($resultats['id'])).'\')">Afficher</button>
	</div>
	<div id="detail'.intval($resultats['id']).'"><strong>Déscription :</strong> '.nl2br(stripslashes(trim($resultats['description_long']))).'</div>';
}
?>
<script>
	function afficher_cacher(id)
	{
		console.log('id :',id,", button id : button_"+id);
		if(document.getElementById(id).style.visibility=="hidden")
		{
			document.getElementById(id).style.visibility="visible";
			document.getElementById(id).style.display = "block";
			document.getElementById('bouton_'+id).innerHTML='Cacher';
		}
		else
		{
			document.getElementById(id).style.visibility="hidden";
			document.getElementById(id).style.display = "none";
			document.getElementById('bouton_'+id).innerHTML='Afficher';
		}
		return true;
	}
</script>

Sinon et pour éviter tout ça, tu peux couper le php avec ?> et écrire le code html à l'intérieur de la boucle pour avoir une syntaxe lisible :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
<?php
...
while($resultats=$stmt->fetch(PDO::FETCH_ASSOC)){
?>
   <div class="bttn_unite fl">
		<a href="#detail<?=intval($resultats['id'])?>" title="Plus de détail">
			<span onclick="afficher_cacher('detail<?=trim(intval($resultats["id"]))?>')">Plus de détail</span>
		</a>
		<button id="bouton_detail<?=trim(intval($resultats['id']))?>" onclick="afficher_cacher('detail<?=trim(intval($resultats['id']))?>')">Afficher</button>
    </div>
     <div id="detail<?=intval($resultats['id'])?>"><strong>Déscription :</strong><?=nl2br(stripslashes(trim($resultats['description_long'])))?></div>
<?php //reprendre php
}

22/01/2021, 14h03
Sergio_zero

Bonjour Toufik83,
Merci pour ton aide.
Effectivement la ligne avec les guillemets fessait un bug, c'est à force de tout modifier.
J'ai un peut adapté le code qui affiche les boutons pour n'avoir qu'un seul bouton.

Code:

echo'<div class="bttn_unite fl" id="bouton_detail'.trim(intval($resultats['id'])).'" onclick="afficher_cacher(\'detail'.trim(intval($resultats['id'])).'\')"><span class="tgros">+</span> de détail</div>';

Tout fonctionne bien sauf qu'au chargement de la page les div detail sont affichées hors le but c'est de cliquer pour les afficher.
Est ce que je dois faire un fichier css en php pour récupérer les id des div detail qui sont afficher pour les mettre en display:none; ou il faut plutôt que je modifie un truc dans le js ?
22/01/2021, 14h14
Toufik83

Bonjour,

En css tu peux cibler les éléments ayant des id commençant par "detail" par exemple [id^="detail"]{display:none}.

Ou bien ajouter une class à tes div <div class="myClass" id="detail'.intval($resultats['id']).'">...</div> ensuite le css .myClass{display: none;}.
22/01/2021, 14h53
Sergio_zero

Un grand merci.
Ça fonctionne nickel.