Le bloc EPFL Toggle permet d’afficher / masquer une partie de l’information affichée sur une page. En d’autres termes, il s’agit d’un bloc au contenu retractable parfois appelé “accordéon”.
Ce bloc a la particularité de ne pas avoir de contenu propre. Il faut imbriquer d’autres blocs à l’intérieur du bloc Toggle
- Ajoutez le bloc EPFL Toggle.
- Dans le champ Titre, indiquez le titre de l’élément. Ce dernier est toujours visible.
- Cliquez sur le bouton + immédiatement au-dessous du titre et sélectionnez un bloc à imbriquer
- Répétez cette opération si vous souhaitez ajouter d’autres blocs
Options du toggle
Affichage du contenu
Par défaut le contenu du toggle ne s’affiche pas. Pour afficher le contenu à l’ouverture de la page, procédez de la manière suivante :
- Dans la colonne de droite, assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus.
- Choisissez l’état initial du toggle.
- Open : Le contenu du toggle est affiché.
- Closed : Le contenu du toggle est masqué. Il faut cliquer sur le titre pour y accéder.
Lien direct vers un toggle
Il est possible de créer un lien qui pointe directement vers un toggle précis. Cela se fait en deux étapes. Dans un premier temps attribuez une “ancre” au toggle en question, puis lorsque vous créez le lien, ajoutez le nom de l’ancre. Voici la marche à suivre détaillée :
Attribuer une ancre
- Dans la colonne de droite, assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus
- Cliquez dans le champ Ancre et insérez un nom.
Attention : ne pas utiliser de caractères spéciaux, d’accents, d’espace ou de caractères de ponctuation.
En outre, les liens étant sensibles à la casse, il est autorisé d’utiliser des majuscules mais il faudra respecter la syntaxe de lors de la création du lien.
Exemple : demo-ancre
Créer le lien
- Créez un lien vers la page contenant le toggle
(pour plus d’info sur la création de liens consultez Ajouter un lien vers une page de votre site) - A la fin de l’URL, insérez le symbole # immédiatement suivi par le nom de l’ancre
Exemple : https://www.epfl.ch/mapage#demo-ancre
Exemple
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.