Menu accordéon mais avec du texte

Version imprimable

09/06/2009, 14h23
Babybel54

Menu accordéon mais avec du texte

Bonjour,

Je suis actuellement en train de réaliser une plaquette web pour mon association, et on m'a demandé une page listant les formations que l'on donne, le problème c'est que cette page est trop grande si tout est écrit normalement.

Tout d'abord voici ma page :
Ma page FORMATIONS
(Ne pas faire attention au probleme de décalage a gauche des menus ... ^^)

Vous pouvez voir les formations listés, ce qui n'est vraiment pas très propre.
Mon code se décompose comme ceci

Div "separation" contenant un HR

DIV formation_bloc
-formation_bloc_gauche
---formation_titre
---formation_anime
-formation_bloc_droite
---formation_description

Mon CSS : Mon styles.css

J'aimerais faire une sorte de menu accordéon, du style :

_____________________________________(HR)
TITRE
anime
_____________________________________(HR)
...

Et que les Titres deviennent des Onclick()
ou la description se déploirait en dessous :

_____________________________________(HR)
TITRE
anime
_____________________________________(HR)
TITRE
anime
DESCRIPTION
_____________________________________(HR)
TITRE
anime
_____________________________________(HR)

Là si vous n'avez pas compris vous pouvez regarder le menu à droite (Glossaire) sur le site suivant :
Exemple de menu comme je veux !

Je suis débutant en CSS, mais suis pres a me donner à fond pour apprendre ^^

Merci d'avance de votre aide :)

Si j'ai bien compris, tu veux qu'automatiquement tes titres soit cliquables, et que ce click affiche la description correspondante.

Je te conseille de gérer cela en Javascript :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 function init() { var i=0; var formation; while(formation=document.getElementById("formation_titre_"+i)) { formation.onclick=afficherOuCacherDescription(this); i++; } } function afficherOuCacherDescription(objet) { tempo=objet.id.split('_'); desc=document.getElementById(tempo[0]+'_description_'+tempo[2]); if (desc.style.display=="none") desc.style.display=="block"; else desc.style.display=="none"; } </script> </head> <body onload="init()">
Je présume ici que tes titres de formations possèdent pour idée "formation_titre_x" et que les descriptions ont pour id "formation_description_x" et pour classe "formation_description".
Dans ton CSS, tu mettras ceci :
Code:

1 2 3 4 5 div.formation_description { display:none; }
Bon, j'espère ne pas avoir répondu à côté :p

11/06/2009, 09h05
Babybel54

(Ta ta ta ta !) Vous êtes le maillon fort !

Merci c'est sympa, ça m'a l'air pas mal du tout, j'vais tester ça.

Tu me proposes du javascript, en fait j'aurais pensé que le CSS suffisait :P, mais bon j'peux m'adapter ^^.
11/06/2009, 09h21
_jey_

Tiens moi au courant si ça marche (ou pas) ou si tu veux des explications : j'ai posté ça un peu rapido avant de partir du boulot, donc je n'ai pas pris le temps de commenter...
11/06/2009, 09h51
le_chomeur

ou comme ça ?
http://mbox.tuxfamily.org/accordeon/#
11/06/2009, 11h20
_jey_

Voyons déjà s'il s'en sort avec du Javascript basique avant de l'envoyer vers du jQuery et consort... j'y avait pensé aussi !
11/06/2009, 11h21
le_chomeur

pas de jquery , c'est un script que j'ai fait .....
11/06/2009, 11h28
Babybel54

Ah ah j'sors de réunion là, j'suis débordé mais j'vous tiens au courant :D J'vais m'y mettre ^^
11/06/2009, 11h33
Babybel54

Bon peut pas tester avant cette aprem mais j'ai jetté un coup d'oeil.

Appelons script de _jey_ n°1 et le_chomeur n°2.

Si je regarde bien les 2 travail par les Id, mais le script de jey nécessite d'avoir un nom de class(id) différent par formations ? Et donc un style différents pour chaque formation dans mon .css ?
Car si c'est ça la solution 2 me parait plutôt sympathique du fait qu'on change pas de class.

bon a tout a l'heure ^^:ccool:

Et encore merci
11/06/2009, 12h01
_jey_
Ce n'est pas parce que l'id est différent que tu dois déclarer x styles CSS...
Tu peux les déclarer par rapport à l'attribut class, ou alors écrire
Code:

1 2 3 4 [id^="formation_"] { /*style*/ }
Ce style s'appliquera à tous les éléments dont l'id commence par "formation_".
11/06/2009, 13h19
Babybel54

Super réactif ^^

J'connaissais pas cette méthode de style , merci de m'apprendre un truc ^^.
16/06/2009, 14h04
Babybel54

Vous croyiez que je ne reviendrais pas !!! :calim2:

Et bien si ca y'est j'ai trouvé la solution ^^
Après avoir testé les votres, qui m'ont bien plus, un ami m'a montré autre chose et voilà le résultat : Le Résultat !

Et voici où j'ai trouvé la solution :
La Solution !

Je vous remercie car vos infos m'ont quand même bien aidé :aie: (pas tapé)!
16/06/2009, 14h30
le_chomeur

la source est compressée sur l'exemple en ligne donc la flemme de décortiqué,

mais je n'ai pas compris la différence avec le mien ^^

ps : la mienne ne nécessitait QU'UN seul id, celui du conteneur ;)

content que le post soit résolu ^^
17/06/2009, 09h53
_jey_

Bien joué Babybel, ça a de la gueule :)