Clear search
Close search
Google apps
Main menu

HTML5 expanding build guide

Control collapse of the creative

To collapse the creative, create an object that controls the collapse on user interaction. You can set it up to collapse on user click or mouse over. The example in this article shows you how to set it up to collapse on click on a custom button.

Create an object

Create an object in the HTML file using the <div> tag, then assign an ID.

Example HTML

<div id="main-panel">
<div id="collapsed-panel">
<!-- Add collapsed content here. -->
<div id="expand-button"></div>
<div id="expanded-panel">
<!-- Add expanded content here. -->
<div id="collapse-button">CLOSE X</div>
Style the object

Style the object you created in the CSS using the ID you assigned it.

Example CSS

#collapse-button {
  position: absolute;
  width: 75px;
  height: 20px;
  right: 10px;
  top: 10px;
  cursor: pointer;
Add collapse functionality

As with expanding an ad, collapsing an ad is an asynchronous process that follows this exact order:

  1. The creative requests to collapse using the requestCollapse method.
  2. This request dispatches the COLLAPSE_START event which tells the creative to perform the collapsing animation (if there is one).
  3. Once the collapsing animation finishes, the creative requests to complete the collapse using the finishCollapse method.
  4. This request dispatches the COLLAPSE_FINISH event which tells the creative that it may now perform additional functionalities or animations on the collapsed panel.
Example JavaScript
<script type="text/javascript">
var isExpanded = false;

function expandStartHandler() {
  // Perform expand animation.
  // Optionally, should you want the direction to expand in call:
  // Enabler.getExpandDirection(); //
  // When animation finished must call

function expandFinishHandler() {
  // Convenience callback for setting
  // final state when expanded.
  isExpanded = true;

function collapseStartHandler() {
  // Perform collapse animation.
  // When animation finished must call

function collapseFinishHandler() {
  // Convenience callback for setting
  // final state when collapsed.
  isExpanded = false;

function actionClickHandler() {
  isExpanded ? Enabler.requestCollapse() : Enabler.requestExpand();

Was this article helpful?
How can we improve it?