Modules can be downloaded from the Drupal website (http://www.drupal.org). The Views Accordion project page can be found at:

We covered the idea of evaluating modules on drupal.org back in Chapter 3, Basic Concepts, and at the time of writing the Views Accordion module for Drupal did not have a stable release (currently 8.x-1.0-alpha1). However, we know it works well enough for our purposes here.

Copy the URL of the link to either of the archives:

Visit the Extend page on your local site and click on Install new module:

You will see a momentary modal popup window appear as the module code is downloaded and then you will see a second confirmation page which tells you that the installation was completed successfully.

Click the Enable newly added modules link to do just that:

Type a few appropriate letters in the Search box to filter down the modules list, then enable the Views Accordion checkbox:

In order to see the views_accordion plugin at work, we will need to rework our view as a field-based view rather than a content-teaser view.

Visit your FAQ page at /faq and click on Edit view in the contextual links and click the Content link in the Format section:

Then, in the popup window choose Fields and click on Apply (all displays):

Click on Apply one last time and the view will now be field-based.

The view will need two fields active: firstly, the Title, which forms the clickable parts of the accordion, and then the Answer as the content, that gets revealed—this is, in fact, simply the Body field. So, the next step is to add the Answer (the Body field) into the field list.

To do this, click on the Add button (marked as 5 in the following screenshot). Then, type answer into the Search input (6), so as to narrow down the list of available fields on the left-hand side.

Enable the Body field (7), and finally hit Apply (all displays):

In the subsequent pop-up window, you can leave all settings at default values and click on Apply (all displays) again.

Lastly, choose to use the newly provided plugin. Under Format, click on the Unformatted list link (1):

In the resulting pop-up window, choose the jQuery UI accordion option (2) and then click on Apply (all displays) again (3):

In the subsequent pop-up window, you can leave all the settings at their default values and click on Apply one final time.

Lastly, press the Save button to make all your changes permanent:

You will see from the Views preview area that the view is now accordion-powered:

Save the view and return to the FAQ page to see the new accordion-powered view: