Click & Reveal Interactive

Click & Reveal Interactive

Click & Reveal Interactive

Click & Reveal interactive elements let users click on an item to uncover hidden content. This feature helps manage screen space effectively and offers an engaging way to access additional information.

Here is a short video on how Click & Reveal Works:



How to create Click & Reveal Interactive:

To create a Click & Reveal Interactive, follow these steps:
  1. Click on the "Create" button located in the Click & Reveal Interactive section.
  2. You will be redirected to the page mentioned below, where you can start building your Click & Reveal Interactive.



 Once the form is open, you'll find the following fields to fill out:

  1. Interactive Title: Enter a title for your Click & Reveal interactive, prominently displayed or serving as a label.

  2. Click Content: Interactive element users click to trigger actions or reveal additional information.

  3. Reveal Content: Information visible after interacting with click content, enhancing user experience with supplementary details or functionality.

Add Section for Click & Reveal

  1. Click 'Add Section' button to add collapsible sections below existing ones in Click & Reveal form.
  2. A + icon appears on Section Line to 'Add Section Below' for adding new sections.
  3. Use up or down arrow icons to move sections instead of dragging.
  4. Click 'Delete' icon on Section Line, confirm in 'Remove Section' window, then click 'Remove' to delete.



Please Note: Whenever a new section is added, by default, it will be directly reflected instead of navigating to the previous section.

Customize Options:

Personalize fonts, colors, styles, and spacing to enhance visual appeal and usability for Click & Reveal Interactive.


Click Content

Includes options for Padding (px), Border color, Border (px), Border radius, and Background color.




Click Content

Includes options for Padding (px), Border color, Border (px), Border radius, and Background color.

Highlight key information and make a memorable impression with the following customization options:
  1. Padding (px): Space inside an element's border, enhancing layout and readability with pixel measurements.
  2. Border Color: Customize border color to highlight content, using palette or specific Hex/RGBA codes.
  3. Border (px): Specifies border thickness or width with options like Solid, Dashed, Dotted, Double, Groove, and Ridge.
  4. Border Radius: Adjusts curvature of border corners for a softer visual appearance.
  5. Background Color: Changes background color behind text to improve readability and emphasize content, accessible via color palette or Hex/RGBA codes.

Preview:

The PREVIEW option is conveniently located in the far right corner of the form section for all interactive elements, allowing easy access for reviewing your changes.


THANK YOU!

    • Related Articles

    • Release notes for Loree A2401.3

      24 January, 2024 Feature Enhancements Enhanced customization options for "Tabs" Interactive: Ability to add a separator line between Tabs: A new style in Loree Interactive allows you to customize your tabs and enhance their visual appeal. With this ...

    • Release notes for Loree A2401.5

      2 February, 2024 Bug Fixes Alignment issues on Click and Reveal Issue Statement: The alignment of content is not effective on left alignment of click and reveal contents. When it set to Left alignment, it still overwrites with Justify alignment. ...

    • Loree Interactives

      Loree Interactive content engages its consumers by requiring active participation. This type of content fosters better interaction between the creator and the audience, making learning easier and more interesting. It presents concepts in an engaging ...

    • Release notes for Loree - Canvas A2202.1

      Loree Edit option in element's mini-menu for Loree Interactive As a Loree user, When we have to edit a Loree interactive already present on a page or within a template - We have to either add a new row and click on the icon and then click Loree ...

    • Image Hotspot

      Image Hotspot An image hotspot interactive allows users to click on specific areas (hotspots) within an image to reveal additional information or media. This enhances user engagement by providing an intuitive and visually appealing way to explore ...