Collapse

Toggle the visibility of selected content on your page using a Foundry Button or a custom link of your own using a unique ID.

Examples

Header

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco ex ea commodo consequat. Duis aute irure dolor in reprehenderit in fugiat nulla pariatur. Excepteur sint occaecat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Wax on, wax off

Collapse is a bit like a standalone accordion item, but instead of having dedicated accordion items it is triggered off of the provided Button, or through a custom, Unique ID that you add to any other link on your page. This provides a supremely versatile way to hide / show content to your visitors.

Settings

Edit Mode

Edit Mode Title

Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.

Trigger

Mode

Here you can choose the method by which you wish to trigger the collapsible section of content. By default the Button mode is used, which automatically adds a button to the top of the Collapse tool.

The External option gives you the ability to trigger the collapse section from just about any link on your page using a Unique ID. Be sure your ID does not have any spaces of special characters. Keep it simple. Do not place a hash tag in your ID.

When creating your link to trigger the Collapse section's content you'll want to create your link so it looks like this:

#youruniqueid

Note that you'll put a hash tag in front of your unique ID in your link.

Content

Start Open

Enabling this feature will force the Collapse section to start open when the page loads. By default this option is off, meaning the content of the Collapse tool will be hidden during page load.

HTML Comment

HTML Comment

Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.

Custom

This field allows you to replace the default HTML Comment with your own text.

CSS

Classes

Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.