TP : Construire un développement en accordeon full css

On souhaite produire un effet "accordeon" sur la structure suivante. Cette structure est composée d'une succession de div contenant :

  1. un bouton radio (<input type="radio">)
  2. son label
  3. un article
<div>
	<input id="ac-1" name="accordion-1" type="radio" checked="">
	<label for="ac-1">LE DIPLÔME</label>
	<article class="ac-small">
		<p>Diplôme d'État ...</p>
	</article>
</div>

Pour faire fonctionner l'accordeon, il suffit de rajouter quelques propriétés au css de que trouverez sur la page.

 

Diplôme d'État délivré par l'UPMC (Université Pierre et Marie Curie),la Licence professionnelle « Intégrateur et gestionnaire de flux numériques pour les industries graphiques » est préparée par la voie de l'apprentissage

Cette formation délivre une double compétence liant les métiers des arts graphiques et l'informatique avec pour objectif le développement des nouvelles technologies numériques et web

Les métiers auxquels pourront postuler les jeunes diplômés se retrouvent dans tous les domaines industriels et de service, du média papier ou web, que ce soit dans une imprimerie, une maison d'édition chez un fabricant ou un donneur d'ordre

La formation se déroule sur 12 mois, d'octobre de l'année n à septembre n+1 (soit 600 h) sur le mode de l'alternance : école Estienne et(ou) université / entreprise toutes les trois semaines