
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
- Insérer la boucle dans un
Modifier le fichier sommaire.html
- Vous devrez inclure le nouveau fichier à partir de sommaire.html, soit ajouter juste au-dessus de </head> :
<INCLURE{fond=inclure/jquery} />
[1] bien sûr vous pouvez changer le nom !