Can I use accordions within view templates?

Using Site Studio you can create a Drupal view where each of the view results is rendered as an accordion tab item. An example of this in use might be a list of FAQ's where each question is the Accordion link and each answer is the content that's revealed. 

The view template

To create a View template which renders as an accordion your View template will look something like this:

The Accordion tabs container will need to contain the Pattern repeater to specify how many items to repeat and the View item to render each View result. The View item references a content template and it's within this, that you will add the Accordion tabs item element. Shown below:

Content template with accordion tabs item

The Accordion tabs item will be placed within your content template. This might be a teaser template or a template for a custom view mode you've created. The content template will look something like this:

The Accordion tabs item must be the parent element within the template because the Accordion tabs container will be expecting to see it at this level.

Important additional steps

The Accordion tabs item includes the navigation link that the user will click on to open and close the accordion or tab. Usually, this navigation link text is entered manually within the element settings, but when using it within a View, the navigation link text will need to be dynamically populated using a token. The accordion tabs items settings will look something like this:

In the example above, the navigation text will be populated using the node title.

In addition, the accordion tabs item must be given a unique ID so that the JavaScript that opens and closes the accordion or tab knows which one is being clicked on. To give an Accordion tabs item a unique ID:

1. Click on the Markup tab within the Accordion tabs settings
2. Click on the Properties button and then click on Classes and ID's > Add ID
3. Click back on the form to close the menus
4. Within the ID field, enter an identifying word and then a token for something that will be unique to the content. For example, the accordion-[node:nid]. It will look something like this:

1. Click Apply and then Save your template.

Finish and test

If you've followed the process above, and applied the View template to your view, you should see that your View renders each of the view results as an Accordion tabs item and that the navigation text is populated with the token content you selected.