Toggle

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

  1. Ajoutez le bloc EPFL Toggle.
  2. Dans le champ Titre, indiquez le titre de l’élément. Ce dernier est toujours visible.
  3. 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 :

  1. Dans la colonne de droite, assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus.
  2. 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

  1. Dans la colonne de droite, assurez-vous que l’onglet Bloc est actif, si ce n’est pas le cas, cliquez dessus
  2. 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

  1. 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)
  2. 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.