Accordion ou Collapse (noms utilisés dans le jargon)
Référence: http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_ref_js_collapse&stacked=h
A l'adresse ci-dessus vous pouvez copier le code source (essayez c'est simple voir mon test sous détail ci-dessous)
Voici un exemple simple qui étend le panneau de présentation:
Cliquez sur Détails...
Collapse
Note: L'attribut data-parent
fait en sorte que les éléments "collapsés" soient fermés lorsque un autre panneau est en fonction.
Le texte est facilement adaptable, groupe par groupe sans risque de se tromper, le source a été marquée par des commentaires. Ce groupe 1 a été modifié et le 4ème groupe a tout simplement été rajouté.
Pour le mettre en route (et en rajouter un groupe), simplement copier un groupe/data et coller à la suite au bon endroit (c'est facile) et bien renommer les ID (2 dans le groupe, et 1 dans les datas).
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Texte4 rajouté. Texte 4
1) Ligne 1 de description
2) Ligne 2 de description
Dernière ligne ----------Fin
1) Ligne 1 de description
2) Ligne 2 de description
Dernière ligne ----------Fin
Fin de démo
[tip.instructions]