dojo/fx/Toggler

Authors:Peter Higgins, Nikolai Onken, Marcus Reimann, Jared Jurkiewicz
Developers:Bryan Forbes, Peter Higgins, Eugene Lazutkin, Bill Keese, Adam Peller, Alex Russell, Dylan Schiemann, sjmiles
since:V1.0

dojo/fx/Toggler is a helper class for wrapping a DOM node with ‘FX’ to use when showing and hiding that node. By default it uses the dojo/_base/fx::fadeIn() for showing and dojo/_base/fx::fadeOut() for hiding of a node. The Toggler is set up by passing in an JavaScript object of parameters that define the node, the animation functions to use, and the duration for the show and hide operations.

Usage

Usage is creating a new instance of the class, passing at least the DOMNode that the instance should relate to:

require(["dojo/fx/Toggler"], function(Toggler),{
  // Create a new Toggler with default options
  var toggler = new Toggler({
    node: "someId"
  });

  // Hide the node
  toggler.hide();

  // Show the node
  toggler.show();
});

The constructor takes a hash of parameters:

Parameter Type Description
node DOMNode|String The DOMNode or ID of the node that the Toggler applies to
showDuration Integer? Optional How long, in milliseconds, the show function is applied for. Defaults to 200.
showFunc Function? Optional The function that is applied on .show(). Defaults to dojo/_base/fx::fadeIn()
hideDuration Integer? Optional How long, in milliseconds, the hide function is applied for. Default to 200.
hideFuc Function? Optional The function that is applied on .hide(). Defaults to dojo/_base/fx::fadeOut()

show()

This method plays the show animation and takes one optional argument:

Argument Type Description
delay Integer? Optional The amount of time, in milliseconds, that the animation should be delayed before starting. Defaults to 0.

.show() returns an instance of dojo/_base/fx::Animation.

hide()

This method plays the hide animation and takes one optional argument:

Argument Type Description
delay Integer? Optional The amount of time, in milliseconds, that the animation should be delayed before starting. Defaults to 0.

.hide() returns an instance of dojo/_base/fx::Animation.

Examples

Example 1: Toggle a DOM node (with defaults)

require(["dojo/fx/Toggler", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Toggler, dom, on){
  var toggler = new Toggler({
    node: "basicNode"
  });
  on(dom.byId("hideButton"), "click", function(e){
    toggler.hide();
  });
  on(dom.byId("showButton"), "click", function(e){
    toggler.show();
  });
});
<button type="button" id="hideButton">Hide the node! </button>
<button type="button" id="showButton">Show the node! </button>
<div id="basicNode" style="width: 200px; background-color: red;">
  <b>This is a container of random content to toggle!</b>
</div>

Example 2: Toggle a DOM node with custom durations

This example has a slow fade out and a slowish fade in.

require(["dojo/fx/Toggler", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Toggler, dom, on){
  var toggler = new Toggler({
    node: "basicNode",
    showDuration: 3000,
    hideDuration: 5000
  });
  on(dom.byId("hideButton"), "click", function(e){
    toggler.hide();
  });
  on(dom.byId("showButton"), "click", function(e){
    toggler.show();
  });
});
<button type="button" id="hideButton">Hide the node! </button>
<button type="button" id="showButton">Show the node! </button>
<div id="basicNode" style="width: 200px; background-color: red;">
  <b>This is a container of random content to toggle!</b>
</div>

Example 3: Toggle a DOM node with custom animation functions

This examples uses the wipeOut and wipeIn functions.

require(["dojo/fx/Toggler", "dojo/fx", "dojo/dom", "dojo/on", "dojo/domReady!"],
function(Toggler, coreFx, dom, on){
  var toggler = new Toggler({
    node: "basicNode",
    showFunc: coreFx.wipeIn,
    hideFunc: coreFx.wipeOut
  });
  on(dom.byId("hideButton"), "click", function(e){
    toggler.hide();
  });
  on(dom.byId("showButton"), "click", function(e){
    toggler.show();
  });
});
<button type="button" id="hideButton">Hide the node! </button>
<button type="button" id="showButton">Show the node! </button>
<div id="basicNode" style="width: 200px; background-color: red;">
  <b>This is a container of random content to toggle!</b>
</div>

See also

Error in the documentation? Can’t find what you are looking for? Let us know!