Force a specific tab, slide, or accordion section to be active on page load

Current version: 10.1

SXA comes with composite components that contain blocks of information that automatically change from one element to another, or that you can manually change. When you open a web page with a composite component, by default the composite opens on the first tab, slide, or section. You might want a different element to be in focus. For example, when a customer comes to the page after clicking the link to a specific product.

This topic describes how you can use the composite's component ID to add the focus element to the URL.

Add a composite component ID

To create a component ID:

  1. In the Experience Editor, on the composite's toolbar, click More and click Edit component properties.

  2. In the Control Properties dialog box, on the General tab, in the Id field, enter an ID for the component. For example: tab

Add the query string parameter to the URL

To use the composite's component ID in the URL:

  • Use the following query string:

    http://<domain>/<page>?RENDERING_ID=TAB_INDEX

    http://<domain>/<page>?

    Add a question mark to the path. For example, http://sxa/renderings/composites/tabs?

    RENDERING_ID=

    The component ID of the composite. For example, tab.

    TAB_INDEX

    The index of the tab that you want to open. Tabs indexes start from 0.

    For example, to open the page (sxa/renderings/composites/tabs) with the third tab in focus, you must use the following URL:

    http://sxa/renderings/composites/tabs?tab=2

Do you have some feedback for us?

If you have suggestions for improving this article,