Search
Documentation
Collapse.
Learn how to use the collapse block.
Read the original Bootstrap documentation on collapsible content here.
Overview
The collapse block gives you the ability to add content to your page that can be toggled to visible or hidden with the click of a button or link. For the collapse block to function properly it must have a unique value in the HTML Anchor option eg: my-collapse. This will add an id attribute to the collapse block. You can then toggle this content using a button or a link with the href attribute matching the specified id eg: href="my-collapse".
Sweet roll donut jelly beans jelly beans muffin. Cupcake jujubes bonbon shortbread lollipop. Bonbon brownie bonbon halvah lollipop gummi bears jujubes. Bear claw bonbon macaroon jujubes toffee chocolate cake muffin.
How it works
In order to get the collapse block to function there are a few steps you need to take:
- Add the collapse block to your page
- Add any content you wish to be included in the collapse block
- IMPORTANT: You must add a HTML anchor (id attribute) to the block – HTML Anchor option is found under the Advanced section
- To toggle the collapse block add either a text link or a button to the page (not inside the collapse block)
- Update the link to go to the HTML anchor of the collapse block with a leading #
An example of this would be to add the HTML anchor attribute to the collapse block of my-collpase you would then need to add a link or button that links to #my-collapse. The rest will be taken care of for you.
The collapse block has the follwoing options:
Settings
Open
The open option allows you to specify whether the collapse block should be open or closed on page load. By default the content will be hidden, to make it visible on page load check this option.
Reset Settings
Blocks tend to have a large number of settings along with different settings for each device size. You may get to the point where you have changed lots of settings and want to revert them back to the default. This can be time consuming and difficult to remember which settings have been changed to we have supplied three buttons that make this a piece of cake. Simply click the relevant button to reset your settings.
- All: When you click this button is will reset all of the settings for the selected block
- Global: When you click this button it will reset all of the settings outside of the device specific tabs
- Devices: When you click this button it will reset all of the settings within the Device Specific tabs
Advanced
HTML Anchor
The HTML anchor option allows you to set an ID on the current block. This is useful when you wish to link to a specific area on a page.
Additional CSS class(es)
The additional class(es) option lets you add any other classes to the block. This is really useful as it allows you to utilise all of the Bootstrap utility classes to quickly apply styles and add more advanced customisations. A few examples of this would be to align all inner content by adding the text-start, text-center or text-end classes. You also have the ability to quickly search all of the available Bootstrap classes. To search Bootstrap classes open the Add Bootstrap class select box. You can filter the results by typing in the available search field. When you select an option it will automatically be added to your class list.
