EverWeb Codebox logo

EverWeb Widgetbox 3

Toggle Image

Toggle
Image
Toggle Image widget

Open/Close Image

The widget creates an image which can be toggled between the open/closed state using a button created with the widget on the previous page.
The image can be styled with padding, border or a box shadow.
The toggle action has a choice of animations which target width, height or opacity to create different effects.
As can be seen from the examples on this page, the image can be either open or closed on page load.

toggle-button-demo

Widget Settings

Choose the image, adjust the size using the drag handles or the Metrics inspector and enter alt text for SEO.
Add padding if required and set the background color.
For a border, set the width, color and corner radius. Note that the larger the value of the corner radius the more padding has to be added.
Set the box shadow radius and color if required.
Choose the animation type. "Opacity" has a fade effect and "height" and "width" have an elastic effect.
Enter the image ID. This should be an alphanumeric string with no spaces or special characters.
It can be as simple as img-1, img-2 etc.
NOTE that this same ID must be entered into the widget settings of the corresponding button widget.
The "Display" checkbox is checked by default. Leave it checked if the image is to appear on page load or uncheck it so that the image does not appear on page load and requires the button to be toggled to reveal it.
Drag the widget into the required position on the design canvas and use the "Arrange" menu to bring it to the front of any items it covers or overlaps.

Toggle Image Widget

These widgets are included in the More-2 widget pack.

Toggle Widget Settings
toggle image widget height animation