EverWeb Codebox logo

EverWeb Widgetbox 3

This widget is included in the More-2 widget pack.

toggle-button-demo

Toggle Button

Toggle Button widget
Toggle Image
Toggle Text

Toggle Image or Text

This is the button used to toggle either an image or a text box open and shut.
The button can have either a border or a box shadow - or both.
The item to be toggled can be either open or closed on page load.
The advantage of using separate widgets for the button and the toggled item is that they can be placed anywhere on the page in relation to each other without getting into adding positioning info.

Widget Settings

Enter the button text.
Adjust the width using a drag handle or the Metrics inspector and the height using the value for padding.
A return can be created using the HTML5 line break <br> and the lines can be vertically spaced using the value for line height.
Choose the font family and set the font size, color and text align.
Set the background color or check the box for a color gradient and set the colors and the gradient angle.
If a border is required, set its width, color and corner radius.
A box shadow can be added by setting its radius and color.
Enter the button ID. This should be an alphanumeric string with no spaces or special characters.
It can be as simple as b-1, b-2 etc.
NOTE that this same ID must be entered into the widget settings of the corresponding image or text toggle widget.
Since this button is mainly for use on touch screen devices, the minimum dimensions should be 42px by 42px for a finger button and 72px wide for a thumb.

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