afficher / masquer les div d'une série de div appeler par un while
Bonjour voici
j'utilise une requete PHP pour appeler des livres qui sont dans ma base de données, ceci grâce a une boucle PHP while.
pour chaque livre j'affiche donc :
- le titre
- l'auteur
- et une quatrième de couverture
c'est la qu’intervient mon javascript
afin de cacher cette quatrième de couverture (qui peut être parfois lonnnngue)
j'ai donc créer grâce a un "span", un bouton qui me permet de masquer ou d'afficher cette quatrième de couverture
mon problème est comment faire en sorte que quand je clic le sur "le bouton afficher ou masquer" de la quatrième de couv de mon 2ème livre, ou 3ème ou autre...
ca ne referme pas celle de mon 1er livre ???
voir le résultat ici : https://clesdasie.fr/bibliotheque/?pageActuelle=2
- est-ce une histoire de code mal placé ?
- est-ce qu'il faut créer des id différentes pour toutes les quatrième de couv de mes livres ?
n'y a t'il pas un moyen simple
que feriez vous ?
merci beauuuucoup ! :)
voici mon code :
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
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
<?php
// requete PHP pour lister la liste des livres
$reponse2 = $bdd->query("SELECT *
FROM livres
LEFT JOIN livres_categorie
ON livres.code_categorie = livres_categorie.code_categorie_livres_categorie
$whereRequete
ORDER BY titre
ASC
LIMIT $numDeDepart,$nbParPages
") or die(print_r($bdd->errorInfo()));
while ($donnees2 = $reponse2->fetch())
{
$titre = stripslashes ($donnees2['titre']);
$auteur = stripslashes ($donnees2['auteur']);
$quatre_de_couv = stripslashes($donnees2['4couv']);
?>
<div class="livre">
<?php
echo '
<div class="texte-liste-livre">
<h3>'.$titre.'</h3>
<p>Auteur : <strong>'.$auteur.'</strong></p>
<p>Quatrième de couverture :</p>
<span class="bouton" id="bouton_texte" onclick="javascript:afficher_cacher(\'texte\');">Afficher le texte</span>
<div id="texte" class="texte">
<p class="quatreDeCouv">'.$quatre_de_couv.'</p>
</div>';
echo '</div>';
?>
<script type="text/javascript">
function afficher_cacher(id)
{
if(document.getElementById(id).style.display=="none") // si il est cacher j'utilise le double "==" pour lire sont etat
{
document.getElementById(id).style.display="block"; // le rendre visible sous forme de block en lui attribuant la valeur avec un simple "="
document.getElementById('bouton_'+id).innerHTML='Cacher le texte';
}
else
{
document.getElementById(id).style.display="none"; // sinon le cacher, donc il apparaitera toujours de base caché sauf si je clic sur le bouton
document.getElementById('bouton_'+id).innerHTML='Afficher le texte';
}
return true;
}
afficher_cacher('texte'); // j'appelle la fonction qui sera executée
// j'ai appelé la fonction afficher_cacher à la fin du texte c'est simplement pour que dès le chargement de la page, le texte soit caché.
</script>
</div><!-- class="livre" -->
<?php
}
?> |
