foundation-toggleable-control is a control for foundation-toggleable.


Indicates the control. The .foundation-toggleable element managed by this control is determined by the following priorities:

  1. the element specified at [data-foundation-toggleable-control-target].
  2. the closest ancestor (i.e. equivalent using jQuery: control.closest(".foundation-toggleable"))

Selector Rule:



Indicates the action to take. The valid values are show and hide, that will call or FoundationToggleable.hide() respectively. If this attribute is not specified, then it is interpreted as a toggle. i.e. Show the target element when it is hidden, and hide it when it is already shown.

Selector Rule:



The selector to the .foundation-toggleable that will be shown upon activate. Either this attribute or data-foundation-toggleable-control-src needs to be specified.

Selector Rule:



The URL to the .foundation-toggleable content that will be loaded and shown upon activate. You can make use of this attribute to load the toggleable—that may not be used often—lazily. Either this attribute or data-foundation-toggleable-control-target needs to be specified.

Selector Rule:



Indicates the behavior when the control is also under another toggleable element.

It has the following value:


Hide the parent toggleable element.

For example you have Popover A, which contains the toggleable-control to open another Popover B. When the value is hide, upon activating the control, Popover A will also be closed.

Selector Rule:


Relationship Graph

digraph "foundation-toggleable" { rankdir=BT; "foundation-toggleable-control" -> "foundation-toggleable" [label="controls", weight=8]; }