Menu accordéon mais avec du texte

Babybel54 Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   -  
Babybel54 Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   -
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.



Ce que je voudrais faire
A voir également:

4 réponses

Réponse 1 / 4
Sandriine Messages postés 1255 Date d'inscription   Statut Membre Dernière intervention   283
 
Tu n'a pas fini ton message...
0
Réponse 2 / 4
Babybel54 Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   1
 
Je sais lol j'le modifiais mais tu as répondu donc j'pouvais pu ^^

Donc je reprends (en devant tout réécrire) :P

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 :
http://gotti.matthieu.free.fr/oriffpl/formations.html
(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 : http://gotti.matthieu.free.fr/oriffpl/images/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 :
http://www.microsoft.com/genuine/downloads/FAQ.aspx?displaylang=fr#ID0EV

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

Merci d'avance de votre aide :)
0
Réponse 3 / 4
Sandriine Messages postés 1255 Date d'inscription   Statut Membre Dernière intervention   283
 
Désolé je ne sais pas faire ça non plus mais sur le site de microsoft que tu donne en exemple, c'est du javascript car en bas dans la barre d'état il y a marqué 
javascript:toggleGlossary('Activation');
.

Je ne saurai t'en dire plus mais je pense qu'en CSS c'est faisable en jouant sur les positions des div.

J'espère que quelqu'un saura t'aider mieux que moi.
0
Réponse 4 / 4
Babybel54 Messages postés 24 Date d'inscription   Statut Membre Dernière intervention   1
 
Bon pour l'instant j'ai une trame de travail à tester ^^
Je vous copie colle le message d'aide que j'ai reçu sur un autre site.

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 : 

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 : 

 
div.formation_description
{
   display:none;
}




_________________

J'ai pas encore testé mais j'ai peur de devoir créer un style dans mon css a chaque formation ... et ça c'est pas du tout ce que je veux ^^
0

Discussions similaires

menu caché
laurent -
ChariduP -

7 réponses
Formule Excel : "SI" une cellule contient un mot, alors ?
Tonio5933 -
Mike-31 -

9 réponses
les entrées et les sortées
oussman -
MarsuGL -

2 réponses