[BOOTSTRAP + PHP] Problème menu accordéon

Olmek
Les bases HTML/CSS

Bonsoir,

J'ai essayé de combiner le menu accordéon de bootstrap et une boucle while mais le résultat n'est pas convaincant.

J'obtiens bien mes menus accordéon mais il n'y en a qu'un sur 2 qui fonctionne.

Et aussi comment fait-on pour que les menus soient fermés lorsque l'on arrive sur la page.

Merci par avance.

Je peux fournir mon code si besoin

20 réponses

sheb
Réponse acceptée

Hello,

Toujours pareil :/ Le premier et la troisième ne fonctionnent pas mais le deuxième et le quatrième fonctionne

Vérifie les ID, ils contiennent un espace.

Et aussi comment fait-on pour que les menus soient fermés lorsque l'on arrive sur la page.

Je crois qu'il ne faut pas ajouter la class in dans 

<div id="Hozier" class="panel-collapse collapse in">
François Cammas

Effecitvement avec le code cela serai mieux ;-)

Olmek
Auteur 
<?php

$bdd = new PDO('mysql:host=localhost;dbname=broadsound', 'root', '');
  $bdd->exec("SET CHARACTER SET utf8");
  $bdd->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE,PDO::FETCH_ASSOC);
  $bdd->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_WARNING);

  $count=$bdd->query('SELECT COUNT(id) as nbArt FROM artistes'); 
  $datacount = $count->fetch(PDO::FETCH_OBJ); 
  $nbArt = $datacount->nbArt; 
  $nbparpage = 4;
  $nbpages = ceil($nbArt/$nbparpage);

  if(isset($_GET['page']) && $_GET['page']>0 && $_GET['page']<=$nbpages)
    { $pagecourante = $_GET['page']; }
  else { $pagecourante = 1; }

  $req = $bdd->query("SELECT * FROM artistes ORDER BY nom LIMIT ".(($pagecourante-1)*$nbparpage).",$nbparpage");

?>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/essai.css" rel="stylesheet">
  </head>
  <body>

<div class="row">
  <?php while ($donnees = $req->fetch()) { ?>
  <div class="col-xs-12">
    <div class="panel panel-default col-lg-6">
      <div class="panel-heading"> 
      <a href="#<?php echo $donnees['nom']; ?>" data-toggle="collapse"><?php echo $donnees['nom'];?></a> 
      </div>
      <div id="<?php echo $donnees['nom'];?>" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables
        </div>
      </div>
    </div><br>
  </div><?php } ?>
</div>

<script src="bootstrap/js/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.js "></script>
</body>

</html>
François Cammas

Comme ça je peux savoir si tu as des erreurs js dans la console .

François Cammas

Pour la gestion de faire apparaitre et disparaitre les contenus, tu slideup au chargement et tu geres avec les slide functions

Olmek
Auteur

Merci pour ta réponse
Je ne maitrise pas le javascript malheureusement :/

François Cammas

Mets ton col-lg-6 au meme niveau que ton<div class="col-xs-12">

Soit : 

<div class="col-xs-12">

Devient : 

<div class="col-xs-12 col-lg-6">
Olmek
Auteur

J'aimerais que mes articles apparaissent les uns en dessous des autres et pas 2 par ligne ;)

François Cammas

Tu as mis

<div class="col-xs-12">
    <div class="panel panel-default col-lg-6">
      <div class="panel-heading">

Vire le col-lg-6

Olmek
Auteur

Ah oui mince désolé je n'ai pas mis la bonne version de mon code :/ Je suis désolé
A la place j'ai

<div class="panel panel-default col-sm-12 col-md-offset-4 col-md-6 ">
François Cammas

Peux tu mettre le code généré par le navigateur ???

Olmek
Auteur

Je ne sais pas si c'est ça mais voilà

<html><head>
    <meta charset="utf-8">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/essai.css" rel="stylesheet">
  </head>
  <body>

<nav class="navbar navbar-inverse">
        <div class="container-fluid">
          <ul class="nav navbar-nav">
            <li><a href="index.php"><img src="medias/broadsoundbanner.png"></a></li>
            <li><a href="news.php">Nouveautés</a></li>
            <li><a href="artistesgroupes.php">Artistes/Groupes</a></li>
            <li><a href="blogsound.php">BlogSound</a></li>
            <li><a href="forum.php">Le Saloon</a></li>
            <li><a href="oldies.php">Oldies</a></li>
          </ul>
          <form class="navbar-form navbar-right inline-form">
            <div class="form-group">
              <input type="search" class="input-sm form-control" placeholder="Recherche">
              <button type="submit" class="btn btn-primary btn-sm">Chercher</button>
            </div>
          </form>
        </div>
      </nav>

<div class="row">
  <div class="container">
    <div class="col-xs-12">
    <div class="panel panel-default col-sm-12 col-md-offset-4 col-md-6 ">
      <div class="panel-heading"> 
      <a href="#Arctic Monkeys" data-toggle="collapse">
Arctic Monkeys<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
      </div>
      <div id="Arctic Monkeys" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables
        </div>
      </div>
    </div><br>
  </div>  <div class="col-xs-12">
    <div class="panel panel-default col-sm-12 col-md-offset-4 col-md-6 ">
      <div class="panel-heading"> 
      <a href="#Hozier" data-toggle="collapse">
Hozier<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
      </div>
      <div id="Hozier" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables
        </div>
      </div>
    </div><br>
  </div>  <div class="col-xs-12">
    <div class="panel panel-default col-sm-12 col-md-offset-4 col-md-6 ">
      <div class="panel-heading"> 
      <a href="#Imagine Dragons" data-toggle="collapse">
Imagine Dragons<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
      </div>
      <div id="Imagine Dragons" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables
        </div>
      </div>
    </div><br>
  </div>  <div class="col-xs-12">
    <div class="panel panel-default col-sm-12 col-md-offset-4 col-md-6 ">
      <div class="panel-heading"> 
      <a href="#Nazca" data-toggle="collapse">
Nazca<span class="glyphicon glyphicon-chevron-down pull-right"></span></a>
      </div>
      <div id="Nazca" class="panel-collapse collapse in">
        <div class="panel-body"> Ce plugin permet de créer des effets "accordéon" totalement paramétrables
        </div>
      </div>
    </div><br>
  </div></div>
</div>

<script src="bootstrap/js/jquery.js"></script> 
<script src="bootstrap/js/bootstrap.js "></script>

<script id="hiddenlpsubmitdiv" style="display: none;"></script><script>try{for(var lastpass_iter=0; lastpass_iter < document.forms.length; lastpass_iter++){ var lastpass_f = document.forms[lastpass_iter]; if(typeof(lastpass_f.lpsubmitorig2)=="undefined"){ lastpass_f.lpsubmitorig2 = lastpass_f.submit; lastpass_f.submit = function(){ var form=this; var customEvent = document.createEvent("Event"); customEvent.initEvent("lpCustomEvent", true, true); var d = document.getElementById("hiddenlpsubmitdiv"); if (d) {for(var i = 0; i < document.forms.length; i++){ if(document.forms[i]==form){ if (typeof(d.innerText) != 'undefined') { d.innerText=i; } else { d.textContent=i; } } } d.dispatchEvent(customEvent); }form.lpsubmitorig2(); } } }}catch(e){}</script></body></html>
François Cammas

Qu'est ce que ça donne si a la place de 

  <div class="col-xs-12">
    <div class="panel panel-default col-sm-12 col-md-offset-4 col-md-6 ">

Tu mets

  <div class="col-xs-12 col-sm-12 col-md-offset-4 col-md-6">
    <div class="panel panel-default  ">

ou encore une seule div

<div class="panel panel-default col-xs-12 col-sm-12 col-md-offset-4 col-md-6 ">
Olmek
Auteur

Toujours pareil :/ Le premier et la troisième ne fonctionnent pas mais le deuxième et le quatrième fonctionne

En tout cas merci de m'aider :)

François Cammas

y a-t-il une erreur js déclenché au chargement ou au moment du click sur tes 'panel-heading'

Olmek
Auteur

Je ne maitrise pas du tout foreach...oui je sais je vais pas aller loin si je ne connais pas les bases
Je connais la structure mais je ne sais pas comment intégrer ma base de données dedans

<?php $donnees = array(); //là je ne sais pas
foreach( $donnees as .....//là non plus
François Cammas

et les erreurs js ??

Olmek
Auteur

J'ai essayé de mettre des points d'arrêts avec la console mais les fichiers ( jquery.js et bootstrap.js) ont plusieurs milliers de lignes de code....

François Cammas

mais au niveau de la console ?

Olmek
Auteur

Tu as entièrement raison Sheb :D pour le deux problèmes !! Je te remercie :)

Et merci à tout le monde de m'avoir aidé :)