Fiche N°9 - Un accordéon en sommaire

Objectif : Jouer avec jquery, et utiliser un accordéon afin de présenter beaucoup d’informations sur une seule page.

Charger les css et javascript de l’accordéon :

• Créer le sous-répertoire squelettes/inclure
• Éditer le fichier inclure/jquery.html :

• Les deux premières lignes chargent le code javascript, les deux suivantes le css correspondant. La dernière permet d’utiliser l’accordéon sur le div ayant comme id accordeon [1]. Différentes options peuvent être fixées pour modifier le comportement de notre accordéon, voir la documentation pour en savoir plus.

Modifier le fichier inclure/recents.html

• Ce fichier implémente la boucle article qui permet d’afficher les articles les plus récents. Repérez la BOUCLE_articles et modifiez-la de la manière suivante :

• Les modifications proposées visent à :
  • Insérer la boucle dans un div appelé accordeon
  • Intégrer le tag <small> au header <h3>, en effet il faut que le <div> qui constitue le cœur de l’élément (et la partie qui bouge de l’accordéon) soit voisin du header
  • Ajouter un lien ("lire la suite") car l’accordéon empêche de cliquer tranquillement sur le titre de l’article comme avant
  • Ajouter un filtre pour couper les articles à 200 caractères, pour une question d’esthétique

Modifier le fichier sommaire.html

• Vous devrez inclure le nouveau fichier à partir de sommaire.html, soit ajouter juste au-dessus de </head> :