Display Field Values in an Accordion In Drupal

Posted on November 27, 2015 - 5 Minute Read

You probably already know that Drupal offers Views Accordion to display content in jQuery Accordions. This is fine if you're looking to display specific content in this format, like a custom content type. However, what if you're simply looking to display field values from a node on the node's display in an accordion? This would require the use of contextual filters and block views if you were to use Views Accordion. However, there's a much simpler way to achieve this functionality with Field Group and Field collection.

Below is the final result:

The above image shows how the field data is displayed on a node in an accordion format.

Screen Shot 2015 11 28 at 9 41 02 AM

The above image shows how the field data is stored in the node. Users have complete control over the accordion title and body.

Install and Enable The Necessary Modules

Install and enable Field Group and Field collection and their dependencies.

Screen Shot 2015 11 27 at 10 56 16 AM

Create a Field Collection Field

Navigate to an existing content type and add a new field using the Field collection Field Type. In my case I am going to use the default Basic Page content type. You can also create a new custom content type if you wish.

  1. Add a new field called Accordion and set the field type to Field collection

Screen Shot 2015 11 27 at 10 57 13 AM

  1. Under Field Settings select Hide blank items and set Number of Values to Unlimited

Screen Shot 2015 11 27 at 10 59 09 AM

Screen Shot 2015 11 27 at 10 59 52 AM

  1. Under the Manage Display Tab, located at admin/structure/types/manage/your-content-type/display configure the following:

    1. Set the Label to <Hidden>
    2. Set the Format to Field only
    3. Set the View mode: to Full content

    Screen Shot 2015 11 27 at 11 03 40 AM

  2. Save

Configure the Field Collection Field To Display Content In An Accordion

  1. Navigate to the field collection configuration page at admin/structure/field-collections and select manage fields for the field collection we just created

Screen Shot 2015 11 27 at 11 05 47 AM

  1. Add a Text field with the following configuration:

Screen Shot 2015 11 27 at 11 06 38 AM

  1. Enable Required field

Screen Shot 2015 11 27 at 11 08 01 AM

  1. Set Number of values to 1

Screen Shot 2015 11 27 at 11 08 07 AM

  1. Add a Long text field with the following configuration:

Screen Shot 2015 11 27 at 11 09 42 AM

  1. Set Text processing to Filtered text

Screen Shot 2015 11 28 at 9 31 37 AM

  1. Enable Required field

Screen Shot 2015 11 28 at 9 32 05 AM

  1. Set Number of values to 1

Screen Shot 2015 11 28 at 9 32 26 AM

  1. Navigate to the Mange Display tab for the field collection at admin/structure/field-collections/field-accordion/display
  2. Add a new field group with the following configuration
  3. Label: Accordion Wrapper
  4. Group Name: group_accordion_wrapper
  5. Format: Accordion Group

Screen Shot 2015 11 28 at 9 34 39 AM

  1. Save
  2. Nest the Accordion Title and Accordion Body fields under the Accordion Wrapper group you just created.
  3. Use the default settings for Accordion Wrapper
  4. Set the labels for Accordion Title and Accordion Body to <Hidden>

Screen Shot 2015 11 28 at 9 36 34 AM

  1. Save

Conclusion and Next Steps

Now you can navigate to your content type that has the field collection and start adding custom accordion elements. This is different than Views Accordion because the accordion formatting happens directly on the node, rather than in a custom view that need to be configured.

Categorized In:Tagged In: