Forum : Bootstrap et PHP (data-toggle accordéon)

Bonjour,
J'ai un problème au moment de créer un effet "accordéon" bootstrap dans une boucle while PHP. Je travaille sur mon CV : j'utilise une base de données, afin que PHP boucle sur toutes mes expériences professionnelles afin de les afficher l'une après l'autre dans le sens anti-chronologique.

Ce que je cherche à faire avec bootstrap, c'est qu'il n'affiche que la date, le titre du poste et l'entreprise, mais que, si l'on clique sur le poste (par exemple), on ait la description du poste qui apparaisse.
Le problème, c'est que bootstrap utilise pour cela un id, qui doit être unique, mais, évidemment, ma boucle while le fait apparaître pour chaque item. Résultat : c'est toujours l'expérience mentionnée en premier (c'est-à-dire le premier item de la liste) qui se déploie, quelle que soit la ligne sur laquelle on clique.

Voici mon code :

while ($donnees = $reponse->fetch())
{
list($anneed,$moisd,$jourd)=explode("-", $donnees['debut']);
list($anneef,$moisf,$jourf)=explode("-", $donnees['fin']);
$mois_fr = Array("janvier", "février", "mars", "avril", "mai", "juin", "juillet", "août", "septembre", "octobre", "novembre", "décembre");
$num_moisd=$moisd-1;
$num_moisf=$moisf-1;
$nom_moisd=$mois_fr[$num_moisd];
$nom_moisf=$mois_fr[$num_moisf];
    ?>
<div class="container"><div class="panel panel-default" id="une_exp">
<a href="#descript" data-toggle="collapse"><div class="container" id="act"><span id="metiers"><?php echo $donnees['metier']; ?> : </span><span id="entreprises"><?php echo $donnees['entreprise']; ?></span></div></a>
<div class="panel-collapse collapse" id="descript"><?php echo $donnees['description']; ?></div></div></div>
<?php }

Merci d'avance de votre aide.

betaWeb

Réponse acceptée

Salut,

Tu peux faire comme ceci :
PHP :

<!-- ... -->
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#ton-elem-<?= $id ?>" aria-expanded="true" aria-controls="collapseOne">Group Item #1</a>
<!-- ... -->
<div id="ton-elem-<?= $id ?>" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne"><!-- ... --></div>
<!-- ... -->

nico22150

Bonjour,

Si je ne dit pas de betise il te faut jouer avec les href et tes id

exemple

<div class="container">
    <div class="panel panel-default" id="une_exp">
        <a href="#<?= $donnees['id'] ?>" data-toggle="collapse">
            <div class="container" id="act">
              <span id="metiers">
                  <?php echo $donnees['metier']; ?> : 
              </span>
              <span id="entreprises"> 
                  <?php echo $donnees['entreprise']; ?>
              </span>
            </div>
        </a>

        <div class="panel-collapse collapse" id="<?= $id ?>">
            <?php echo $donnees['description']; ?>
        </div>
    </div>
</div>

comme tu peut le voir sur ton "href" j'ai mis "<?= $donnees['id'] ?>" et sur ta div j'ai mis en id <?= $donnees['id'] ?> a toi d'adapter.

En esperant t'avoir aider.

Markos

Auteur

Merci à tous, c'est effectivement ce que j'ai fini par faire. Je me suis dit que la seule solution était d'inclure une variable (en fait, un simple incrément) en php dans l'ID de la div à cacher. Alors, je me suis d'abord un peu emmêlé les pinceaux avec le code php, d'où mon post, mais à présent ça marche. Le comportement de bootstrap par rapport à une boucle est donc à noter.

Pour la mise en forme, il ne faut pas oublier, dans le fichier css qui complète bootstrap, de transformer le code suivant :

#descript{

et le remplacer par celui-ci :

[id*="descript"]{

A bientôt !

Bootstrap et PHP (data-toggle accordéon)

3 réponses