Open and close expanded tiles

You are reading the NextGen Documentation

NextGen widgets are a new and improved way to display UGC content onsite.

From September 23rd 2025, all new widgets created will be NextGen.

Please check your widget version on the Widget List page to see if it is a Classic or NextGen widget.

You can read the Classic Widget Documentation here.

Note: This feature is exclusive to NextGen widgets.

How to open and close expanded tiles

Expanded tiles are dialog overlays contained within the core widget. They are used to display additional information about a tile, such as the tile's image, title, and description. This guide will show you how to open and close expanded tiles using the SDK.

Opening an expanded tile

You can utilise sdk.openExpandedTile() to open an expanded tile. This method accepts a tileId as a parameter, which is the unique identifier of the tile you wish to expand.

sdk.openExpandedTile(tileId)

Closing an expanded tile

You can utilise sdk.closeExpandedTile() to close an expanded tile. This method does not require any parameters.

sdk.closeExpandedTile()

Example

Here is an example of how you can open and close an expanded tile using the SDK.

import { ISdk } from "@stackla/widget-utils"

declare const sdk: ISdk

sdk.querySelectorAll(".tile").forEach(tile => {
  tile.addEventListener("click", () => {
    const tileId = tile.getAttribute("data-tile-id")
    sdk.openExpandedTile(tileId)
  })
})

setTimeout(() => {
  sdk.closeExpandedTile()
}, 5000)