Nouvelle version du post en cliquant ici : http://www.gularu.fr/blog/?p=403
Voici donc le tutorial, tutoriel concernant le superbe accordéon web 2.0 tendance que l’on voit chez tous les geeks qui se respectent ! 100% compatible Prototype et Scriptaculous. Pas grand chose à faire, suivez le guide :
Tout d’abord, téléchargez l’archive pour réaliser le tuto : téléchargez ici
Il contient toujours la même chose : les js, le fichier index ou demo, et le css. Ici, je vous ai laissé les exemples donnés avec l’archive officielle. La librairie s’appelle accordeon.js dans le dossier js et le css feuille_index.css.
Trois étapes :
1- Mettez le head pour les js et le css de votre accordéon :
2- Insérez votre accordéon dans le body :
Les classes doivent porter le même nom que dans mon exemple car la librairie s’en sert.
3- Ajoutez votre code prototype pour initialiser l’accordéon :
Voir le code prototype gérant l’initialisation
Je rappelle que l’écouteur avec window et load est en fait le lancement d’une fonction lorsque le DOM est complètement chargé, c’est à dire que lorsque tous les divs, images et textes sont apparus.
C’est tout ! Pas très compliqué n’est-ce pas !
Bonjour et bravo pour votre tuto sur la librairie accordeon.
Par contre je voudrai rajouter dans mon div accordion_content une scroll bar
J’ai donc mis dans la feuille css le code overfow:auto cela marche lorsque l’on clique sur le content elle apparait la scroll bar et ensuite elle disparait pourriez-vous m’aider ? merci beaucoup
.accordion_content {
background-color: #ffffff;
color: #444444;
overflow:auto;
}
En fait, la librairie n’est pas prévue pour ça mais j’ai testé un truc qui va peut-être t’intéresser même si l’effet n’est pas tip top.
Ouvre le fichier accordion.js avec ton éditeur, et à la ligne 193, remplace height: auto par la hauteur que tu désires. Donc height: auto deviendrait height:200px par exemple.
Voir l’exemple
Je vais chercher de mon côté un code plus propre mais tu peux utiliser ça si ça te convient.
Salut et merci pour ta réponse.
Effectivement cela marche mais le problème c’est que pour tous les autres éléments cela met l’hauteur à 200px… moi je voudrai que l’on puisse choisir à qu’elle élément on veut mettre une scrollbar merci encore de ton aide A+
J’y réfléchie et je te donne une réponse.
Salut et vraiment super ton tuto !!!! par contre j’ai un souci -:) voila j’ai voulu mettre en place l’accordéon sur mon site qui est en construction mais lorsque je met l’accordéon l’ouverture de chaque élément est sacadée et j’ai découvert qu’en fait c’est l’entete « » qui me pose problème car si je l’enlève cela marche nickel donc j’imagine que c’est un problème de feuille de style..tu me diras mais pourquoi tu mets pas cette entete sur ton site ? car si je mets cette entete sur mon site il y a d’autres choses qui ne marche pas…..as tu une idée que cela marche avec une entete simpe html ? merci beaucoup de ton aide
merci
Concernant ton problème, je n’ai pas trop saisi. Si tu peux m’envoyer un mail, je me ferai un plaisir d’essayer de trouver une solution.
J’ai remarqué que mes liens vers le code javascript étaient erronés dans ce post, je les ai changé et remplacé par les bons, regarde si cela ne vient pas de là.
Ok merci de ta réponse j’ai un problème avec ma messagerie..mais en attendant
Si j’enlèver l’entete « » cela ne marche pas très bien !!! cela saccade et moi je suis obligé d’enlever cette entete sinon cela pose problème avec d’autres choses de mon site…pour tester enlève cette ligne !!!
moi je dois laisser l’entete et non « »
oups j’ai oublié de mettre » si j’enlève ton entete sur la page index.html »
l’entete « DOCTYPE html…… »
lol, je suis en stage donc je peux pas te répondre tout de suite mais ce soir, je répondrai plus précisément.
Super merci beaucoup
Salut gularu, j’ai aussi le meme problème car moi aussi j’ai une entete et non <html doctype….ect.).
Si tu as une solution suis preneur…c’est quoi ton adresse email ?
Te souhaite une bonne soirée
Est-ce que vous pouvez m’envoyer un lien pour que je vois précisément le problème parce que là, j’ai l’impression d’être idiot, je comprends rien ^^
Demain je t’envoie mon gabarit et tu pourras tester que lorsqu’il y a l’entete <!DOCTYPE html… accordion ne marche pas par contre si je mets seulement l’entete cela marche..
-:) merci encore de ton aide et de ta patience
ok, je note ^^
Salut,
g un pb avec ton accordeon. Il s’affiche les contents tous ouvert. Lorsque je clique sur les entêtes elle se ferment bien, jusqu’ici pas de probléme mais lorsque je veux réouvrir une entête le contend s’affiche en une police minuscule alors qu’a l’initialisation elle était lisible ?!
J’ai juste copier ton exemple en suivant le tuto. Une idéé ?
en fait le content ne se réaffiche meme pas ?! je suis sous IE6.
Ca fonctionne très bien sous ie6, si tu veux que je t’aide, est-ce que tu peux être plus précis stp.
existe t’il une asstuce pour le rendred compatible avec les dernieres version de prototype et effect ?
Je vais tester avec la version 1.6 pour voir. Je vous répond ensuite.
Effectivement, avec la version 1.6, l’accordéon ne fonctionne plus. Je vais faire un nouveau post avec un accordéon fonctionnant sous la dernière version de prototype.
Vous trouverez sur ce lien la nouvelle version du tuto : http://www.gularu.fr/blog/?p=403
Bonjour et merci pour ce tuto sympa.
Je me trouve cependant confronté à un problème.
J’aimerais garder un ‘content’ ouvert à l’ouverture du site et que le même ‘content’ reprenne les propriétés initialement définit. Je sèche…
Aurait-tu, stp, une indication à me donner?
C’est déjà ouvert à l’ouverture. Je comprend pas bien.
Salut,
Super accordéon, exactement ce qu’il me fallait, cependant je rencontre une petite difficulté. Quand je charge un div avec ton code via ajax, l’acc reste ouvert et ne fonctionne pas. j’suy un peu en panne la.
Une petite idée de la cause de mon pb stp ??
heu avec plus de détails peut-être…
Bonjour,
En effet, cela manque un peu d’infos, alors voila :
Pour faire simple, dans un fichier index.php, je met 3 choses :
1. l’import de script js (prototype.js, scriptaculous.js et accordion.js)
2. un div vide,
3. un lien vers un ajax.updater
Lors du clic sur le lien, mon div vide est bien rempli par l’accordeon (……),
mais il reste complètement déplié et ne réagit pas au clic.
En esperant avoir été plus clair.
Il me faudrait avoir un aperçu du code pour que je puisse t’aider.
Bonjour,
Je en vois pas mon dernier commentaire, As-tu bien reçu mes fichiers ?
Bonjour
Le tuto est super bien fait, l’implentation est simple et rapide par contre j’ai un souci j’aimerai faire un accordeon a plusieur niveau
Exemple:
Accueil
->salut
->contenu de salut
->bonjour
->contenu de bonjour
Contact
->…
tu vois ce que je dire??
et pourrai tu m’aider?
Merci pour ton tuto accordeon. C’est simple et pratique !! génial.