Dynamic Accordion Interactivity

Business Background

Configure the Accordion container to suit your business needs in a few clicks with no code.

Titan Solution

Titan Web lets you add an accordion with dynamic accordion interactivity.

How to Video

In this video, you will learn how Titan Web lets you add an Accordion with dynamic functionality.

  • 00:00 Learn how to configure Accordion Interactivity in Titan Web.
  • 0:16 Head over to elements, click on containers and select accordion.
  • 0:18 Drag and drop the Accordion onto your project easily.
  • 0:30 We talk about the different interactivities you can do with the Accordion.
  • 0:35 We show you what the next step and back steps are in the web project.
  • 1:35 Watch how you can set up a specific step with the Accordion.
  • 2:08 Learn how you add a static ID.
  • 2:46 See how easy it is to reset the values in the Accordion container.
  • 3:40 We recap on how you can configure Accordion interactivity in a few steps.

How to Guide

Note:

Prerequisite:

  1. Add an Accordion container.
  2. Make a note of the tab ID of the tab label.

This image has an empty alt attribute; its file name is cec6da86-0a80-4f30-85c8-bdc83ea1dfcb

 

In this example, we add the accordion interactivity to a button. You can add any conditional logic.

  1. Select the On Click Action icon. The On Click Action screen opens.
On Click Action icon
On Click Action icon
  1. Select the + icon. The Add Node screen opens.
+ icon
+ icon
  1. Under Element Interactivity, select Accordion Interactivity and select the Next button. The Add Node/Accordion Interactivity screen opens.
Accordion Interactivity option
Accordion Interactivity option
  1. Use the Accordion element drop-down list to select the accordion. The options for the accordion are as follows:
  • Reset
    • Select the Reset radio button to reset the accordion with all panels in the collapsed position.
  • Prev Accordion Panel
    • Select the Prev Accordion Panel radio button to jump to the previous panel.
  • Next Accordion Panel
    • Select the Next Accordion Panel radio button to jump to the next panel.
Add Node/Accordion Interactivity
  • Go to Accordion Panel
    • Select the Go to Accordion Panel radio button. The Go to Step option is added.
    • Type the tab ID in the field.
  1. Select the Next button.
Go to Accordion Panel option
Go to Accordion Panel option
  1. If necessary, add a tag and select the Insert button. The Accordion Interactivity is added to the screen.
Accordion Interactivity added
Accordion Interactivity added
  1. Select the Apply button.
  2. Save and Preview the project.
Example
Example

Selecting the button will jump to the accordion tab that was configured:

Example
Example

Hidden Title

Need more help?