<regions:togglable>
AJAX
ajax:delayedload ajax:event ajax:navigation ajax:region
Data
data:calendar data:column data:eventrepeater data:postrepeater data:productbrandrepeater data:productcategoryrepeater data:productrepeater data:repeater data:table data:template data:tree
Forms
forms:address forms:captcha forms:checkbox forms:checkboxgroup forms:codeeditor forms:combobox forms:datepicker forms:dialogbox forms:editbox forms:fileupload forms:form forms:hidden forms:money forms:officeuseregion forms:option forms:password forms:paymentmethod forms:radiobutton forms:radiobuttongroup forms:row forms:searchbox forms:signature forms:slider forms:spinbox forms:submitbutton forms:submitimage forms:submitlink forms:successcontent forms:textarea forms:timepicker
Layout
layout:gallery layout:productgallery layout:rotator layout:stepper layout:stepperpanel layout:tablist layout:tablistitem
Logic
logic:dependency logic:else logic:if logic:include logic:parse logic:variable
Navigation
navigation:breadcrumbs navigation:item navigation:primary navigation:secondary
Personalisation
personalisation:firstname personalisation:fullname personalisation:lastname personalisation:other
Standard
standard:embed standard:icon standard:image standard:link standard:script standard:tooltip standard:video
Templates
templates:button templates:card templates:column templates:fancybox templates:faq templates:flexlayout templates:header templates:row templates:section templates:styles templates:teammember templates:testimonial
Regions
regions:content regions:contentadditional regions:security regions:togglable
DESCRIPTION
ATTRIBUTES
applyClassWhenVisible
applyClassWhenVisibleTo
defaultVisible
id
label
labelArrowPosition
labelPosition
EXAMPLES
Simple Togglable Region
Togglable with Additional Region Content
Third Party
thirdparty:googlemap thirdparty:googlemapmarker

`<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.
- `id`
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>