Folding de bloc

Bonjour

C'est une fonctionnalité toute simple pour l'utilisateur : une page web comporte plusieurs blocs, en haut de chacun il y a un petit bouton (typiquement une flèche). Un clic dessus, le bloc est réduit à juste une ligne. un nouveau clicet le bloc est à nouveau affiché en entier.

Pour représenter les blocs, je pense utiliser (rien de définitif) des fieldsets, et s'ils posent des problèmes ce sera de bonne vieille div.

J'ai plusieurs idée pour essayer de mettre en place ce folding :
- en bricolant avec du CSS de la même façon que quand on utilise :hover pour surligner un élément quand le curseur passe dessus.
- javascript et onclick

Toutefois le temps me manque pour passer la journée à bricoler. L'un de vous aurait il un exemple ou une recommandation du genre "ça ça ne marchera pas" sous le coude ?

Merci d'avance.

PS : Désolé si ce post n'est pas à sa place dans ce forum

Je te conseille le Javascript pour ce genre d'actions.

Sur le onclick, tu change le display de la div à cacher.

Code:

---

1 2 3 4 5

if(document.getElementById(id_div).style.display == none){ document.getElementById(id_div).style.display = "block"; }else{ document.getElementById(id_div).style.display = "none"; }

---

Désolé pour le délais de réponse !


@_IpC_: Idéalement j'aimerai avoir une ligne descriptive du contenu du bloc quand celui ci est replié. Donc est ce que ceci te parait bon :

Code:

---

1 2 3 4 5 6 7 8 9 10

<fieldset id='fieldset123'> <legend onClick=switchDisplay('fieldset123')>Bla</legend> <div id='short'> description courte </div> <div id='long'> contenu complet </div> </fieldset>

---

Avec bien sur switchDisplay qui inverse les deux display des div short et long du fieldSet dont on lui donne l'id.

Salut,

Oui pourquoi pas.

Mais tu devrais regrouper les éléments à cacher en une seule balise car dans le cas présent si demain tu dois en ajouter un autre cela impactera ton code.

ERE

Donc plutôt quelquechose comme ça

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14

<fieldset id='fieldset123'> <legend onClick=switchDisplay('fieldset123')>Bla</legend> <div id='displayBloc1'> <div id='element1'> ... Description ... </div> <div id='element2'> ... </div> </div> <div id='displayBloc2'> <div id='element3'> contenu </div> <div id='element4'> ... </div> <div id='element5'> ... </div> </div> ... </fieldset>

---

Où les displayBloc sont aussi permanent que faire ce peut, et je modifie 'juste' les elements. C'ets bien à ça que tu pensais Rémy ?

Yes !

ERE