How to use Zurb Foundation reveal with open, opened, close, closed callback functions?

Question

On zurb foundation\'s website at http://foundation.zurb.com/docs/reveal.php they listed some Options including

open: callback function that triggers \'before\' the

Answer 1

Event Bindings for Zurb Foundation Reveal -

There are a series of events that you can bind to for triggering callbacks:

$(document).on('open.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('close.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
  // your code goes here...
});

If you have multiple data-reveal used in single page as follows :

Then in this situations you can trigger callback same as explained above but with little modification as shown below :

$(document).on('open.fndtn.reveal', '#element-1[data-reveal]', function () {
  // your code goes here...
});

$(document).on('open.fndtn.reveal', '#element-2[data-reveal]', function () {
  // your code goes here...
});