Effet accordeon qui plante

Salut à tous ...

J'ai inséré l'effet accordéon de Bootstrap dans mon site : http://concept-tech.lu/heberg/v2 et comme vous pouvez le voir, il n'y a que le premier de la page travail en entreprise (avec mise en service, sécurité et informatique) qui se comporte correctement : à savoir lorsqu'on clique sur un titre, les autres se replient. Je pense pourtant avoir bien paramétré tout mais quelque chose m'échappe.

Pouvez-vous y regarder me dire d'où vient le problème?

En vous remerciant d'avance !

Bonjour.

Deux choses :
- quand je vais sur ton site, il y a une erreur JS sur l'accordéon, Monsieur Chrome me dit qu'il ne connait pas $, et effectivement pas à un si haut niveau dans le code.
- et deuxième chose, tu lances le plugin sur un ID, donc ça ne peut fonctionner que sur un élément, même si comme dans ton code tu as mis plusieurs id identiques (ce qui est formellement interdit), donc utilise plutôt une class.

EDIT : je pense que ce topic devrait plutôt être placé dans la rubrique JS
Modifié par SolidSnake (17 Feb 2015 - 08:28)

Pourtant j'ai repris l'exemple de Bootstrap ... je ne code pas spécialement en JS donc je ne sais pas trop l'erreur du $

Voilà je viens de régler les deux soucis. Ce qui ne règle pas mon premier problème, à savoir que les autres menus ne se replient pas lorsqu'on clique sur un titre ...

Bonjour.

De ce que je vois, ça à l'air de fonctionner, non ?
Par contre, je viens d'aller voir la doc, il ne semble pas avoir besoin d'utiliser le bout de code javascript si tu utilises déjà les data attributes (et la fonction aurait été collapse() et non accordion())

Mais, et c'est là mon erreur, si tu précises le data-parent="#accordion", il te faut un id accordion quelquepart. Mais reste quand même qu'il te faut quand même changer les autres ID (qui je le rappelle doit être unique).

OU alors essayer data-parent=".accordion" !

Bonjour.
Autant aller chercher l'info à la source, même si je n'utilise pas bootstrap, je sais que la doc est assez bien foutu.

Enfin bref, après quelques tests, il n'ont apparemment pas prévu l'utilisation des class à la place des id.
Donc, il va falloir comme je te le précisais dans mon dernier message, remettre les id, mais en gardant cette fois-ci en tête qu'il ne doit pas en avoir deux identiques ! (ou 3, ou 4, ou 5, ou 6... euh je vais m'arrêter là), donc par exemple accordion-1, accordion-2...

EDIT: et surtout, ne pas oublier de les préciser respectivement dans les data-parent /!\

Et tu devrais pourvoir également virer le bout de javascript, qui ne doit servir à rien.
Modifié par SolidSnake (20 Feb 2015 - 15:02)

Bonjour.

Evite au possible les MP, surtout si la résolution de ton soucis, pourrait aider d'autres personnes à l'avenir, et surtout que je ne regarde très rarement mes MP, donc...

kisscool a écrit :
Un tout grand merci pour tes conseils.

Donc si j'ai bien compris, je repasse tout en ID et non en class. Ensuite, je dois définir accordeon1, accordeon2 pour chaque menu.

Comment faire donc après pour que accordeon1 et 2 soient pris pour accordeon de base ? Grâce à : data-parent="#accordion" ?

Merci pour les infos

Effectivement, tu dois préciser la div parent dans le data-parent (e.g. data-parent="#accordion2")
Modifié par SolidSnake (23 Feb 2015 - 11:58)

Ca ne fonctionne pas plus que cela ... Une autre idée ??

Bonjour.

Mais je ne vois pas les ID sur ta page, et puis je vois toujours le bout de JS qu'il faudrait enlever.

Solid Snake ?

Bonjour

Je ne suis pas sure que ton code soit très conforme à Boostrap, le mieux serait peut être de recommencer à zéro en partant de l'exemple

http://getbootstrap.com/javascript/#collapse-example-accordion

Comme tu as 2 accordions, il faut donner une id différente à chacun

<div id="accordion_gauche" class="panel-group" aria-multiselectable="true" role="tablist">

et

<div id="accordion_droit" class="panel-group" aria-multiselectable="true" role="tablist">

Cette id est reprise dans les data-parent des liens

<a aria-controls="collapseOne" aria-expanded="true" href="#collapseOne" data-parent="#accordion" data-toggle="collapse"> Collapsible Group Item #1 </a>

Il faut donc modifier les data-parent en conséquence
data-parent="#accordion_gauche" et data-parent="#accordion_droit"

Bonjour

Je vois tes blocs dans le flux, par contre si c'est l'espace après le bloc bienvenue qui te gène, c'est un problème de marge qu'il faut réduire ou supprimer
.bloc_contenu { margin-bottom: 350px;}