Description: Reveal any element when clicking on a trigger element, such as a button or CTA.
Important: The reveal-trigger-value class will reveal the reveal-content-value element, and will not close/hide any other reveals.
Setup:
On the element that you want to trigger the reveal, add 'reveal-trigger-value' to the Element's Settings > Advanced tab > CSS ID & Classes > CSS Class.
On the Section, Row, or Module you want to appear inside the reveal, add 'reveal-content-value' to that Element's Settings > Advanced tab > CSS ID & Classes > CSS Class.
Replace the word 'value' with anything. The trigger will find the content that has the same value.
Details: The reveal content must be on the page in order to appear in the reveal. It will be hidden until triggered.
Additional Classes:
Add to the trigger class to make the browser window scroll to the revealed element. This is useful if the element isn’t right next to the trigger, therefore some users may not see the revealed content. This is helpful on mobile devices.
If you want to have a revealed section open when the page loads, add the class to both the trigger element and the content element.
When the trigger element is clicked, the class “opened” gets added to that element.
To style the opened trigger element, use the following CSS:
[class*="reveal-trigger-"].opened {
// styles go here
}
Description: Reveal only 1 element when clicking on a trigger element, such as a button or CTA.
Important: The reveal-only-trigger-value class will reveal ONLY the reveal-only-content-value element, and will close/hide all other reveals.
Additional Classes:
Add to the trigger class to make the browser window scroll to the revealed element. This is useful if the element isn’t right next to the trigger, therefore some users may not see the revealed content. This is helpful on mobile devices.
If you want to have a revealed section open when the page loads, add the class