HTML5 expanding build guide

Collapse the creative

Next: Set up a multi-directional expanding 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

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

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:

The creative requests to collapse using the requestCollapse method.
This request dispatches the COLLAPSE_START event which tells the creative to perform the collapsing animation (if there is one).
Once the collapsing animation finishes, the creative requests to complete the collapse using the finishCollapse method.
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

<head>
<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
  Enabler.finishExpand();
}

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

function collapseStartHandler() {
  // Perform collapse animation.
  // When animation finished must call
  Enabler.finishCollapse();
}

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

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

Enabler.addEventListener(
  studio.events.StudioEvent.EXPAND_START,
  expandStartHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.EXPAND_FINISH,
  expandFinishHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.COLLAPSE_START,
  collapseStartHandler);
Enabler.addEventListener(
  studio.events.StudioEvent.COLLAPSE_FINISH,
  collapseFinishHandler);
actionBtn.addEventListener(
  'click',
  actionClickHandler,
  false);
</script>
</head>

Hide the close button when the creative is served in an app

If the creative will serve in mobile apps, note that mobile app ad SDKs automatically add their own close button over the creative. If you already have a close button in your creative, the creative will have two close buttons. To hide the MRAID close button, use the Enabler method setUseCustomClose.

var hideMRAIDClose = function() {
  if (studio.common.Environment.hasType(
      studio.common.Environment.Type.IN_APP)) {
    // Hide the MRAID close button and use the creative's close button instead.
    Enabler.setUseCustomClose(true);
  }
};

Was this helpful?

How can we improve it?

HTML5 expanding build guide

Collapse the creative

Hide the close button when the creative is served in an app

Was this helpful?

Need more help?

Try these next steps: