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 objectCreate 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 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;
}
As with expanding an ad, collapsing an ad is an asynchronous process that follows this exact order:
- The creative requests to collapse using the
requestCollapsemethod. - This request dispatches the
COLLAPSE_STARTevent 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
finishCollapsemethod. - This request dispatches the
COLLAPSE_FINISHevent which tells the creative that it may now perform additional functionalities or animations on the collapsed panel.
<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);
}
};