The following buttons will open multiple overlays side-by-side so
that all overlays can be visible together:
Overlay #1
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Donec lorem ligula, elementum
vitae, imperdiet a, posuere nec, ante. Quisque mattis massa id
metus.
Overlay #2
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Donec lorem ligula, elementum
vitae, imperdiet a, posuere nec, ante. Quisque mattis massa id
metus.
Overlay #3
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Donec lorem ligula, elementum
vitae, imperdiet a, posuere nec, ante. Quisque mattis massa id
metus.
Overlay #4
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos himenaeos. Donec lorem ligula, elementum
vitae, imperdiet a, posuere nec, ante. Quisque mattis massa id
metus.
Here are our trigger buttons. Each one references the correct
overlay with the jQuery selector for the rel attribute:
We have four identical overlay elements on the page. Each one is
similar to the one found in the minimal
setup.
JavaScript code
Our JavaScript code initializes each overlay so that
the finish configuration property is different for each
overlay:
Opening and closing all at once
Try these buttons to open and close all overlays at once.
The idea is to get the handle to
each overlay's
API and call its open and close
methods. Here are our functions:
Note: the openAll method could have
alternately been written like
this $("button[rel]").click() which would
programmatically click all triggers revealing all overlays
simultaneously.
The new jQuery Tools book by Alex Libby explores the library in a
precise and structured fashion. If you are getting started on jQuery Tools or
looking for better ways to use the library, this book will be your ally.