Recommended releases

Download Released

Paragraphs jQuery UI Accordion 2 enables you to create paragraphs with
accordion effect in your content. It offers enhanced functionality over
Paragraphs jQuery UI Accordion, using display modes rather than a single
content field.

It is based on the jQuery UI Accordion plugin, which is already included in
core, so there is no need to install additional libraries. See examples on

This module is a fork from Paragraphs jQuery UI Accordion (Github Project Page).

Differences from Paragraphs jQuery UI Accordion

  • Instead of a single content field, you select a display mode to use for
    content in addition to the title field.
  • If you have Font Awesome enabled then you will also be able to select an icon
    field to display an icon in front of the heading.


  • Ability to use it with any paragraph types.
  • Ability to use several accordions on the same page
  • Unique SEO link hashes (multilanguage support)
  • Optional autoscroll to active paragraph (admin toolbar support)
  • Configurable accordion options
  • Use a display mode for content so you can configure for each paragraph type
    using the Paragraph Manage Displays option.
  • Optionally, add an icon field that will display in accordion header.


This module requires that the following module is also enabled:

This module can optionally use Font Awesome to show an icon in the
accordion header before the title.



  • Ensure each paragraph type has a text field for title and at least one other
  • If you wish to use icons, add a field to contain the Font Awesome icon
    identifier string. This could be a text field or a list field.
  • If you have Font Awesome enabled but do not wish to use in an accordion,
    either do not set and icon field or leave the icon field blank for any
    paragraphs you wish to not use an icon for.
  • You must use common title and icon fields across different paragraph types.
  • Create a paragraph display mode (for example, called Accordion) that excludes
    the title field and, if applicable, the icon field.
  • Customise this display mode on each paragraph type you wish to use in the accordion.
  • Add a new paragraphs multiple field to your content type or entity.
  • Go to your entity's Manage display screen and choose 'Paragraphs jQuery UI
    Accordion 2' for the format.
  • Select the proper fields for title and, if applicable, icon.
  • Select the display mode and save your settings.
  • You are now ready to add Accordions to your content.


Bugs and feature requests should be reported in the Issue Queue.

Current Maintainers



This project is GPL v2 software. See the LICENSE.txt file in this directory for
complete text.