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.