<regions:togglable> </...>

An area in a design which can be toggled on or off on a per page basis using a checkbox that appears in the design.

Content

Anything

Attributes

applyClassWhenVisible

string

Applies a CSS class to the element(s) specified by ApplyClassWhenVisibleTo

applyClassWhenVisibleTo

string

Applies the class specified by ApplyClassWhenVisible to elements matched by the selector

Example: #id1, .class2

defaultVisible

bool

Determines whether or not the togglable region is defaultly visible for newly created pages.

string

Give this control a unique id. Can be accessed in the client DOM (eg, document.getElementById('myid') or in the server DOM using [? $myid ?] or [? $('myid') ?]).

label

string

When editing page content, this will shown as the label of the tickbox.

labelArrowPosition

string

A specific position for the label arrow may be set.

If omitted, the arrow will appear in the most sensible location for the given label position.

labelPosition

string

Anchor the label at this position of the togglable region.
Default = 'topleft'.

Examples

Simple Togglable Region

Defines a region in a design which can be toggled on or off when editing pages.

HTML:

<regions:togglable id="footer_promotions" defaultvisible="true" label="Display Footer Promo Area"> Place Togglable Content here. </regions:togglable>

Togglable with Additional Region Content

Add a togglable region, which contains an additional editable content region.

HTML:

<regions:togglable id="footer_promotions" defaultvisible="true" label="Display Editable Footer Promo Area"> <regions:contentadditional id="content_additional_1" /> </regions:togglable>