Nouvelle version de ce billet très lu contenant tout ce qui faut pour que cela fonctionne avec la dernière version de prototype
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. La librairie s’appelle accordion.js dans le dossier js et le css accordion_glam.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. accordion-toggle pour les titres. accordion-content pour le contenu qui apparaît.
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. Le chiffre 1 signifie qu’à l’ouverture de la page, c’est le titre 1 qui va être ouvert, ici Main.
C’est tout ! Pas très compliqué n’est-ce pas !
Bonjour.
Je viens de voir l’effet accordéon…Class et sympa!
Merci beaucoup!
J’ai hâte de l’utiliser…
A plus
Laurent
Ecoute, c’est gratuit, profite-en !
salutunequestioncommentajouterunenouvelecellule?dslpblemedeclaviermerci
Ba tu rajoute une div avec le titre et le contenu.
Bonsoir a tous,
J’ai une question comment faire si dans chaque menu on y triuve un lien, et que quand on clique sur ce lien, l’accordeon concerné reste ouvert…
Merci d’avance..et super boulot
,
bravo
ba tu met le lien, le lien ne fermera pas l’accordeon.
Heu si ! Si il y a un lien, et que l’on clique dessus, il charge automatiquement une autre page, donc l’accordéon se referme…
Saut si on fait des lien en ajax, ce qui permet de ne pas charger la page ou l’accordéon se trouve !
ba le principe du lien normalement c’est d’ouvrir une autre page… sinon on utilise un bouton.
Admettons :
ZONE MEMBRE (accordeon)
- Voir son profil (lien)
- Modifier ses infos (lien)
- tec…(lien)
Si je clique sur un de ces liens, j’aimerais que cette accordéon soit toujours ouvert et visible, puisque ca reste dans le meme « domaine », la « ZONE MEMBRE »…cela evite au visiteur de reouvrir son accordeon, pour par exemple modifier qq chose de sa « ZONE MEMBRE »
Envoie le code par email, tu trouveras mon email sur mon C.V. tout en haut du blog.
Bonjour,
Sympa ce tuto…
Vous sauriez comment configurer le JS pour qu’au chargement il n’y ai aucun panneau d’ouvert ?
Merci bien
Il faut enlever le nom de la classe sur l’onglet concerné.
Salut,
je suis dans le meme cas que Johaaanns, je cherche à ce que le menu en accordéon reste ouvert lors du rechargement de la page. (message 2 décembre 2009 à 13:17).
As-tu trouver une solution ?
Merci d’avance.
Kazzul, décrit aussi précisément que possible ton problème, je vais voir ce que je peux faire.
Je te laisse juger par toi-même.
Connecte toi au site suivant, et test. A mon avis tu comprendras plus vite en testant que si j’explique.
http://warasso.guilde-des-commandeurs.net
Alors,
dans le code : accordion = new Accordion(« test-accordion », 1);
le 1 veut dire quel onglet est ouvert au chargement de l’accordeon. tu dois donc (en php) mettre 1, 2 ou 3 selon la page où ton internaute se trouve.
Ex :
< ?php
if ($page == "example.php) $numAccordeon = 2;
?>
et dans le script :
accordion = new Accordion(« test-accordion », < ?php echo $numAccordeon; ?>);
Merci,
j’ai bien compris ce qu’il faut faire, mais j’arrive pas à faire reconnaitre à Java la variable $numAccordeon.
Quand je fais un echo de cette variable directement dans la page php, j’obtiens bien 1 ou 2 ou 3 en fonction du nom de la page.
Mais en java pas moyen, la dernière fonction ne reconnait rien.
accordion = new Accordion(« test-accordion », );
Le javascript doit être dans la partie html et avec les balises php.
Merci ca fonctionne !
J’avais laisser cette partie dans le fichier accordion.js
Le PHP ne peut pas être lu dans un fichier .js
Heureux que cela fonctionne !
Bonjour
j’aimerai savoir comment puis je faire pour avoir ce menu accordeon mais en Horizontal
et avec un largeur du menu de 964px ?
par avance merci
seb
Bonjour,
accordion fait du yo-yo sous firefox, que faire??
merci en avance
bea
C’est à dire ? Testé sur tous les navigateurs et fonctionnant.
vous avez un mail, que je puisse vous montrez
merci
Bonjour, j’ai adapté ce menu mais je n’arrive pas à modifié la hauteur des sous-menus.
Dans le menu « coté site », il y a 4 sous-menus alors que dans « coté services » il y en a 5, du coup tout les sous-menu ayant moins de 5 j’ai un espace blanc.
ca ne fonctionne pas sous ie et safari!
ca ne fonctionne pas sous ie et safari!
?