CODEWITHSUNDEEP
drupaldrupal-8
mastercheef85
mastercheef85

Reputation: 2269

How to create easy accordions in drupal

Is there a way to easily implement accordions in Drupal 8. Till now, i've done it with field collection (or paragraph) but my client wish to can put an accordion everywhere in a content where he want. with the fields, i need prepare it on the template.

So i think on something like a shortcode known in WordPress:

[accordion]
    [accordion-item id="item-1" title="Title of accordion item"]Drop-down content goes here.[/accordion-item]
    [accordion-item id="item-2" title="Second accordion item"]Drop-down content goes here.[/accordion-item]
    [accordion-item id="item-3" title="A Third accordion"]Drop-down content goes here.[/accordion-item]
[/accordion]

Or is there maybe some kind of a page builder module for Drupal which allows that and gives a bit more flexibility creating the content?

Thanks for any advice.

Upvotes: 0

Views: 2075

Answers (1)

JFC
JFC

Reputation: 586

Ok so here's a very custom solution (not as easy as requested), but still, I guess I'd do it this way. You'll need FieldGroup module and theme preprocesses knowledge.

  • Add an extra field in your form(s). It will be a Fieldgroup of a titre input and a body textarea. Configure it so the user can add an infinite amount of elements.
  • Now lets say you add this token in your wysiwyg : [accordion].
  • In you theme, create a preprocess function for your node (THEMENAME_preprocess_node), and get the wysiwyg content. Search for the token, and if it's there, place the Fieldgroup content there.
  • Don't forget to hide the Fieldgroup content on the display.
  • Finally, in your theme, add an accordion library (or jquery-ui accordion from the core) and apply it on your injected html.

It should do the work.

Edit : You can also go with Views Accordion. But I think it would be a less interesting solution for your client UX.

Upvotes: 1

Related Questions