Toggle

The EPFL Toggle block allows you to show/hide part of the information displayed on a page. In other words, it is a block with retractable content, sometimes called an “accordion”.

This block has the particularity of not having its own content. Other blocks must be nested inside the Toggle block

  1. Add an EPFL Toggle block.
  2. In the Title field, enter the title of the element. The title is always visible.
  3. Click on the + button immediately below the title and select a block to nest
    • Repeat this operation if you wish to add other blocks

Toggle block settings

By default, the content of the toggle block is not displayed. To display the contents when the page is loaded, proceed as follows:

  1. In the right-hand column, make sure the Block tab is active, if not, click on it.
  2. Choose the initial state of the toggle.
    • Open: The content of the toggle is displayed.
    • Closed : The content of the toggle is hidden. Users must click on the title to access it.

Direct link to a toggle

It is possible to create a link that points directly to a specific toggle. This is done in two steps. First, assign an “anchor” to the toggle in question, then when you create the link, add the name of the anchor. Here is the detailed procedure:

Assigning an anchor

  1. In the right-hand column, make sure the Block tab is active, if not, click on it
  2. Click in the Anchor field and insert a name.
    Warning: do not use special characters, accents, spaces or punctuation characters.
    In addition, as links are case sensitive, it is allowed to use capital letters but the same syntax must be used when creating the link..
    Example: demo-anchor

Creating the link

  1. Create a link to the page containing the toggle
    (for more info check Add a link to a page within your site)
  2. At the end of the URL, insert the # symbol immediately followed by the name of the anchor
    Example: https://www.epfl.ch/mypage#demo-anchor

Example

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.