Accordion Style Experiences (Show/Hide Toggle)

The following article will be walking you through how to create accordion style content using your Creator Studio Experiences. An example of this can be found here:

https://zmags.myshopify.com/pages/accordion-example

This article will explain the process in detail, but in general, it is powered by a few key pieces:

• Building several mini Experiences - for example, in the link above, each "question" and each "answer" is a separate Experience
• A Custom Action will need to be added to your account - the steps to do that are below
• Grouping together the code for all your mini Experiences and then publishing that to your site. The code template at the bottom of this article will help you do that

Note: having some basic understanding of how to write/edit code will be helpful here, but is not necessary! Some of this may look daunting, but at the end of the day it is mainly a matter of aligning all your pieces and copy/pasting Experiences into the right areas.

The first thing you will want to do is add the following Custom Action to your account. This can be done via the following steps:

1. Login to Creator Studio and open the Settings wheel in the top right corner
2. Navigate to the "Set Up Integrations" option
3. Click the "+ Create New Action" button which should trigger a pop-up to appear
4. In the first field that reads "Untitled Custom JavaScript", you can name the Custom Action whatever you'd like
5. In the "Paste your Javascript code here" area, paste the Show/Hide Custom Action code found below. Before you hit Save, confirm that the pop up window looks something like this:

Show/Hide Custom Action Code

var x = document.getElementById("#{TOGGLE_ID}");

function toggleContainer() {
     if (x.style.display === "none") {
          x.style.display = "block";
     } else {
          x.style.display = "none";
     }
};

toggleContainer();

With that in place, you can now build out each of your Experiences accordingly - or, if they are already built out, then you just need to add the Custom Action to each of your "questions" (continuing with the example link above's set up) Experiences. Click here for more information on how to apply an Action to a Widget.

You will want to apply the above Custom Action to the Widget that you want someone to click on in order to show/hide your "answer" Experience. That means, you can apply that click Action to a Text Widget, Image Widget, Link Widget or Button Widget.

Select the Widget you want to apply your Show/Hide Custom Action to, and select it from the Action list:

In the "TOGGLE_ID" field, enter anything you'd like in there as long as it does not have any spaces in the name. As a suggestion, enter something in here that relates to the "answer" Experience that should open upon clicking this Widget, since that is what will happen when this Widget gets clicked thanks to this Custom Action. Be sure to use a different and unique "TOGGLE_ID" in every Experience that you are building or else this will not work.

Once you have created all of your "question" Experiences and "answer" Experiences, and applied the Show/Hide Custom Action to the appropriate Widgets in your "question" Experiences, the last piece is to assemble the code for all these Experiences in the proper order.

Note: the most important part of this step will be to match whatever you put in the "TOGGLE_ID" fields in your "question" Experiences with the "div id's" in the code below. For example, if the "TOGGLE_ID" that you used in your first "question" Experience was "OPEN-ONE" then you need to put OPEN-ONE in the first div id field between the quotation marks where it says "PASTE FIRST TOGGLE_ID HERE".

You can insert your Experience code into the following template to help do that:

<!-- Code for first question Experience that contains the custom action -->

PASTE EXPERIENCE CODE HERE

<!-- Code for first answer Experience, to be shown on custom action click -->

<div id="PASTE FIRST TOGGLE_ID HERE" style="display: none"> PASTE EXPERIENCE CODE HERE </div>

<!-- Code for second question Experience that contains the custom action -->

PASTE EXPERIENCE CODE HERE

<!-- Code for second answer Experience, to be shown on custom action click -->

<div id="PASTE SECOND TOGGLE_ID HERE" style="display: none"> PASTE EXPERIENCE CODE HERE </div>

<!-- Code for third question Experience that contains the custom action -->

PASTE EXPERIENCE CODE HERE

<!-- Code for third answer Experience, to be shown on custom action click -->

<div id="PASTE THIRD TOGGLE_ID HERE" style="display: none"> PASTE EXPERIENCE CODE HERE </div>

<!-- Code for fourth question Experience that contains the custom action -->

PASTE EXPERIENCE CODE HERE

<!-- Code for fourth answer Experience, to be shown on custom action click -->

<div id="PASTE FOURTH TOGGLE_ID HERE" style="display: none"> PASTE EXPERIENCE CODE HERE </div>

<!-- Code for fifth question Experience that contains the custom action -->

PASTE EXPERIENCE CODE HERE

<!-- Code for fifth answer Experience, to be shown on custom action click -->

<div id="PASTE FIFTH TOGGLE_ID HERE" style="display: none"> PASTE EXPERIENCE CODE HERE </div>

This code is designed for ten total Experiences - five "questions" and five "answers" - but feel free to add or remove as many "questions" and "answers" as you'd like by deleting or copy/pasting each part of the code accordingly.

From here, simply paste the filled in template code into your site as you would when Publishing any other Experience, and this accordion style content should load from there! All of this code can be placed before or after the code for other Experiences that you have made as well, so that they may appear as part of a larger landing page or something along those lines.

Please contact support@zmags.com with any further questions on this process!