Revealer Widget

Owned by Renske Ward
Last updated: Apr 24, 2023 by Liladhar Patil
3 min read

What is the Revealer widget?

Revealer Widget is used to implement pop-ups/ expandable - collapsible  blocks on the page.

Use as Accordion

Automatic closure of the content when another content is being opened.

Repeat the first content inside the popup

If the Revealer widget is used as a popup and the "Repeat the first content in the popup" check box is selected, the first direct widget will also appear in the popup.

Hide the first content

When the Revealer widget is used to configure the popup on the page then if the checkbox “hide the first content” is enabled then the first web-content will get hide which also not be shown inside the popup.

Use to toggle the block?

By enabling this you can use a toggle (show/hide) for a container. A container should be wrapped with a container/Flexbox widget where the same naming is specified. It’s not necessary to add that container/flexbox inside the revealer widget.

How to create a popup?

  1. Add the Revealer Widget to your page
  2. Add the Web Content inside the Revealer Widget that you want to show inside the popup.
  3. Click on the 'edit' button of the widget. Here you can configure the settings of the Revealer Widget.
  4. Under the tab 'General' you can configure the text that should be shown when the user clicks on the link/button to reveal the content. This is mandatory to see the popup link/button.
  5. Enable the function 'Repeat the first content inside the modal'.
  6. Under the tab 'Options', enable the function 'Use as a popup' to create the popup function. Also enable 'Hide the first content'.
  7. You can also enable the function 'Use as a button' to show the popup link as a button instead of text.
  8. Save the page and check the results.

Simple Revealer

  1. Add the Revealer widget on the Page.
  2. Add two or more web-content inside the Revealer Widget.
  3. Configure the fields for "Show more" and "show less" in all the languages.
  4. Only the contents of first web-content will be revealed and others will be Visible on click of "Show more".

       


How to create a FAQ?

  1. Add the Flex-box widget to your page. 
  2. Add the Revealer Widget inside the Flex-box widget.
  3. Click on the edit button of the Revealer widget. Here you can configure the settings of the Revealer Widget.
  4. Under the tab General you have to configure the question on “show less” and “show more” text field which should be the same text. This is mandatory to filled in to see question.
  5. Enable the function Use plus icon to see + or - icons.
  6. Under the tab Options, enable the function Use as show/hide to hide the answer from question.
  7. Add the Web Content inside the Revealer Widget that you want to show the answer.
  8. Save the page and check the result.

Click here to see FAQ configuration


How to Reveal the content?

  1. Add the Flex-box widget to your page. 
  2. Add the Revealer Widget inside the Flex-box widget.
  3. Click on the edit button of the Revealer widget. Here you can configure the settings of the Revealer Widget.
  4. Under the tab General you can configure the fields for “show more” and “show less” in all the languages.
  5. Under the tab Options, enable the function Use to toggle the block? to toggle the block. under that add the name to toggle (e.g: toggle block) also on which direction you need to toggle the block for that we have dropdown to choose.
  6. On Flex-box widget under the Linking Possibilities tab we have Reveal the content? checkbox enable it and enter the toggle block name which should be same which is configured on revealer widget (e.g: toggle block). Also,  you need to configure the toggle behaviour. 
  7. Save the page and check the result.


How to use as Accordion?

  1. Add the Flex-box widget to your page. 
  2. Add the Revealer Widget inside the Flex-box widget.
  3. Click on the edit button of the Revealer widget. Here you can configure the settings of the Revealer Widget.
  4. Under the tab General you can configure the fields for “show more” and “show less” in all the languages.
  5. Enable the function Use plus icon to see + or - icons if you want to add icons.
  6. Under the tab Options, enable the function 'Use as Accordion' to auto close when another one is opened.
  7. Under the tab Options, enable the function Use as show/hide to hide the content.
  8. Add the Web Content inside the Revealer Widget that you want to show the content.
  9. Save the page and check the result.

For e.g: If we have six revealers in a Page, we just need to enable the use as accordion checkbox in every one of them, then it will work as auto close.

Click here to see Accordion configuration