When a user is creating a node, is it possible to auto generate an accordion based on a field group or field collection? I want the user to enter the title(clickable to expand and show body) and body of their accordion(s).

I see field_group and bootstrap_field_group, but both require me to add the title for example and then give the body of the accordion based on another field... That is admin specific. I'd like to give the user the flexibility to create their own title for each accordion item.

4 Answers 4


The best way I have found to do this was to use Paragraphs. You can create an Accordion paragraph type, and an Accordion Item paragraph type. The Accordion holds Accordion Items. The Accordion Item has 2 fields, Title, and Body.

This allows a user to add an Accordion paragraph to a node, then add as many Accordion Items as they want (and be able to sort them in the form). From there, the theming/js is up to you via templates and js, but that part is fairly easy.

Since Paragraphs are based on fields, it's intuitive for the editor who use used to the node edit interface.

  • Thanks. This is an easy solution for sure. Tons of Flexibility with tpl also. Dec 5, 2017 at 0:21

I saw this really cool presentation at MidCamp a couple years ago which covered how to create your own ckeditor widgets like callouts: http://2015.midcamp.org/session-proposal/widgetizing-wysiwyg

After the session, I took the example custom module which included just a callout widget and added an accordion widget. You can download my custom module here: https://github.com/banoodle/drupal-modules/tree/master/banoodle_widgets

Here is how my module looks/works...

enter image description here If the user enters '3' in the dialog, they see this...

enter image description here

This is the result...

enter image description here

Hope this helps!


  • This makes sense, but I worry about the markup with less than savvy content editors making changes.... Jan 4, 2017 at 19:53

You could look into 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, using the first field as the header for the accordion rows.

If you add the required fields to the node and allow users to edit those. The changes should be reflected in the view automatically.

  • I'd like to render the node. are suggesting this or otherwise? Jan 4, 2017 at 19:54
  • You could choose to not display the fields by hiding them on the content type display settings and probably attach the view to the node using EVA: Entity Views Attachment. Jan 4, 2017 at 19:55

Since you indicate you have a problem with Field Group and Titles, you might also want to try Field Group Titles

This module extends the Field Group module by adding the ability to override the default title of a field group item (horizontal and vertical tabs, accordions, divs and fieldsets) on a per node basis.


The use case that prompted this module included 15 nodes of the exact same format with different tab titles, and it had to be easy for editors. Using Quicktabs for this case would have required each tab to be a separate node, and each instance would have been rendered as a block. So in the above example you end up with 6 nodes and 2 blocks, as opposed to just 2 nodes. Field Groups by itself would require a unique content type for every node where the group's label changes. This module allowed me to add 15 nodes with unique tabs on each using a single content type.

Sounds like something that could fit your needs as well.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.