Text with collapse block

What do web editors use a text with collapse block for?

This block is similar to Text with Link, except that you will see a + symbol and some words. When clicked, the + symbol flies open a section of text that had been “collapsed” within. This is good for a section where you have a lot of text and don’t want to make the user scroll through lots of information before getting to the next section.

Which layout can text with collapse blocks be used in?

Text blocks can be used in the one or two column layout and on a coloured background. If you move blocks or change the background colour after a block has been placed, remember to update the block to reset the accessibility colours.

Who can use text blocks?

Builders and Super Builder can create and edit text blocks.

Text with collapse tutorial Text with collapse examples

Text with collapse tutorial

Step-by-step instructions

  1. Choose “Text with collapse” in the add custom blocks menu.
  2. Title: This is an administrative title that will be used to identify the block and not displayed on the website. 
  3. Header: The is an optional field to display a header above the body text. 
    • Header will be set as an H2 by default but you have the option to change it. Note: Only use H1 if this is being used as a header/title for the page. H2 for any section header. H3 to break up content within the section. Never mix and match header sizes, this will confuse screen readers and make the site less accessible.
    • You will have a choice of heading colours depending on the choice of background colour selected. 
  4. Introduction: This is where you will enter the introduction text you want to display before the (+) to expand more text. The introduction text field uses a WYSIWYG (what-you-see-is-what-you-get) text editor where you can type or copy paste text into. If you copy paste make sure you always clean the formatting after you paste. Do this by highlighting the text and clicking on the clear formatting icon (Tx) on the top ribbon.  This will remove any unnecessary formatting copied over from a word doc or pdf file.
  5. Collapse Title: This is the text that will display beside the (+).
  6. Body Content: This is where you will enter the text you want to display once the (+) is clicked open. The body field uses a WYSIWYG (what-you-see-is-what-you-get) text editor where you can type or copy paste text into. If you copy paste make sure you always clean the formatting after you paste. Do this by highlighting the text and clicking on the clear formatting icon (Tx) on the top ribbon.  This will remove any unnecessary formatting copied over from a word doc or pdf file.
  7. Click on "Update" to save the block.

Text with Collapse examples

Text with collapse in a one column layout

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. Donec id blandit libero, a varius nisi. Vivamus iaculis dui eget tempus commodo. Sed purus arcu, efficitur eu dictum id, dictum non nibh. Quisque sapien est, maximus tincidunt molestie in, facilisis at turpis. 

Proin a placerat ex. Fusce ac eros id tellus pellentesque interdum. Vestibulum ac sem imperdiet, iaculis arcu a, finibus nulla. Sed tempor tellus in mauris varius finibus. Nulla luctus, nibh sed vehicula accumsan, massa tellus aliquet mauris, tincidunt posuere orci odio non leo. Duis semper quam nulla, in maximus sapien sagittis quis. Duis tincidunt nunc id mauris placerat, sed venenatis libero ultricies. Suspendisse vehicula maximus egestas

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. Donec id blandit libero, a varius nisi. Vivamus iaculis dui eget tempus commodo. Sed purus arcu, efficitur eu dictum id, dictum non nibh. Quisque sapien est, maximus tincidunt molestie in, facilisis at turpis. Nullam mollis, sem id eleifend tristique, augue ante hendrerit urna, quis faucibus diam massa quis urna. Mauris odio sem, ultrices non pretium vitae, luctus a neque. Curabitur rutrum in dui interdum semper. In lobortis, lectus id fermentum molestie, nisl erat varius leo, vel luctus elit erat sit amet dui. Mauris venenatis dapibus dolor at molestie. Mauris tempor efficitur justo vel tincidunt.

Example in a two column layout

Proin a placerat ex. Fusce ac eros id tellus pellentesque interdum. Vestibulum ac sem imperdiet, iaculis arcu a, finibus nulla. Sed tempor tellus in mauris varius finibus. Nulla luctus, nibh sed vehicula accumsan, massa tellus aliquet mauris, tincidunt posuere orci odio non leo. Duis semper quam nulla, in maximus sapien sagittis quis. Duis tincidunt nunc id mauris placerat, sed venenatis libero ultricies. Suspendisse vehicula maximus egestas

Proin a placerat ex. Fusce ac eros id tellus pellentesque interdum. Vestibulum ac sem imperdiet, iaculis arcu a, finibus nulla. Sed tempor tellus in mauris varius finibus. Nulla luctus, nibh sed vehicula accumsan, massa tellus aliquet mauris, tincidunt posuere orci odio non leo. Duis semper quam nulla, in maximus sapien sagittis quis. Duis tincidunt nunc id mauris placerat, sed venenatis libero ultricies. Suspendisse vehicula maximus egestas

Proin a placerat ex. Fusce ac eros id tellus pellentesque interdum. Vestibulum ac sem imperdiet, iaculis arcu a, finibus nulla. Sed tempor tellus in mauris varius finibus. Nulla luctus, nibh sed vehicula accumsan, massa tellus aliquet mauris, tincidunt posuere orci odio non leo. Duis semper quam nulla, in maximus sapien sagittis quis. Duis tincidunt nunc id mauris placerat, sed venenatis libero ultricies. Suspendisse vehicula maximus egestas

Example in a two column layout

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. Donec id blandit libero, a varius nisi. Vivamus iaculis dui eget tempus commodo. Sed purus arcu, efficitur eu dictum id, dictum non nibh. Quisque sapien est, maximus tincidunt molestie in, facilisis at turpis. Nullam mollis, sem id eleifend tristique, augue ante hendrerit urna, quis faucibus diam massa quis urna. 

Praesent lobortis lacus vestibulum, venenatis nisi sed, malesuada odio. Aenean quis rhoncus diam. Integer non euismod est. Mauris placerat purus metus, quis pulvinar tellus vulputate nec. Praesent fermentum ultrices metus et dictum. Donec id blandit libero, a varius nisi. Vivamus iaculis dui eget tempus commodo. Sed purus arcu, efficitur eu dictum id, dictum non nibh. Quisque sapien est, maximus tincidunt molestie in, facilisis at turpis. Nullam mollis, sem id eleifend tristique, augue ante hendrerit urna, quis faucibus diam massa quis urna.