Menu accordéon mais avec du texte

**Babybel54** · 09/06/2009, 14h23

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

**_jey_** · 09/06/2009, 18h22

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
div.formation_description
{
   display:none;
}

Bon, j'espère ne pas avoir répondu à côté :p

**Babybel54** · 11/06/2009, 09h05

(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

, mais bon j'peux m'adapter ^^.

**_jey_** · 11/06/2009, 09h21

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...

**le_chomeur** · 11/06/2009, 09h51

ou comme ça ?
http://mbox.tuxfamily.org/accordeon/#

**_jey_** · 11/06/2009, 11h20

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 !

**le_chomeur** · 11/06/2009, 11h21

pas de jquery , c'est un script que j'ai fait .....

**Babybel54** · 11/06/2009, 11h28

Ah ah j'sors de réunion là, j'suis débordé mais j'vous tiens au courant

J'vais m'y mettre ^^

**Babybel54** · 11/06/2009, 11h33

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 ^^

Et encore merci

**_jey_** · 11/06/2009, 12h01

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
[id^="formation_"]
{
         /*style*/
}

Ce style s'appliquera à tous les éléments dont l'id commence par "formation_".

**Babybel54** · 11/06/2009, 13h19

Super réactif ^^

J'connaissais pas cette méthode de style , merci de m'apprendre un truc ^^.

**Babybel54** · 16/06/2009, 14h04

Vous croyiez que je ne reviendrais pas !!!

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é

(pas tapé)!

**le_chomeur** · 16/06/2009, 14h30

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 ^^

**_jey_** · 17/06/2009, 09h53

Bien joué Babybel, ça a de la gueule

Menu accordéon mais avec du texte

JavaScript

Discussions similaires

Partager

Partager