Views Accordion

Views Accordion provides a display style plugin for the Views module.
It will take the results and display them as a JQuery accordion.

Installation

1. Place the views_accordion module in your modules directory (usually under /sites/all/modules/).
2. Go to /admin/build/modules, and activate the module (you will find it under the Views section).

Using Views Accordion module

See attached file for an example. Your view must meet the following requirements:

• Row style must be set to Fields.
• Provide at least two fields to show.

Choose jQuery UI accordion (or Views Accordion for D7) in the Style dialog within your view, which will prompt you to configure (D7 - Needs updating for D8):

• Transition time: How fast you want the opening and closing of the sections to last for, in seconds.
  Default is half a second.
• Start with the first row opened: Whether or not the first row of the view should start opened when the view is first shown.
  Uncheck this if you would like the accordion to start closed.
• Use the module's default styling: If you disable this, the CSS file in the module's directory (views-accordion.css) will not be loaded. You can uncheck this if you plan on doing your own CSS styling. (Not supported in D7 yet)

IMPORTANT
The first field WILL be used as the header for each accordion section, all others will be displayed when the header is clicked. The module creates an accordion section per row of results from the view.

Theming information (Needs updating for D8)

This module comes with a default style, which you can disable in the options (see above). Files included for your convenience:

• views-accordion.css - A default stylesheet with how the classes the author thought would be best used.
• views-view-accordion.tpl.php - copy/paste into your theme directory - place the comments in this file for requirements/instructions.

Both files are commented to explain how things work. Do read them to speed things up.

Print Style

If your accordion includes important, printable information, you can force expand all views_accordion items in your print css (ex. print.css in zen theme) with the following, as a start:

.views-accordion-item .accordion-content {
  display: block !important;
}

IMPORTANT
Disable Theme Developer because it is incompatible and will corrupt the accordion rendering.

Accordion header

Grouping

When grouping fields, the group header can be used as accordion header by using the option
Use the group header as the Accordion header

Combined fields

Views allows for one field to include the content of multiple fields, so you can utilize this views feature for this purpose. See this screenshot for an example setup.

1. Click on the field you want to, and check "Rewrite the output of this field" ... it will open a whole settings section for you.
2. In there you can use the "Replacement patterns" which will allow you to use previously listed fields within that field. It also allows you to use html in there.
3. Then check Exclude from display on the fields before that, since you are including them in that field already.