Minimal setup for expose

This document shows you the basics of setting up expose. You take one or more elements then call the mask method and the magic happens. Here is a demo:

Click on this element to expose it.

standalone demo

The exposing disappears when you click somewhere outside the element or press the ESC button.

HTML code

This demo uses the following simple DIV element to be exposed. It is styled with CSS.

<div id="test">
  Click on this element to expose it.
</div>

HTML

JavaScript code

The exposing happens inside the click event. You'll get access to the clickable element with the $(this) call and the exposing is initialized with the expose() constructor. The api variable is enabled to get access to the exposing API and the load() method performs the exposing effect.

// execute your scripts when the DOM is ready. this is a good habit
$(function() {
  // assign a click event to the exposed element, using normal jQuery coding
  $("#test").click(function() {
    // perform exposing for the clicked element
    $(this).expose();
  });
});

JavaScript