Hello

I try to do an accordion.
I've create paragraph type with 2 fields title and body.
I've added a paragraph in my content type.

I create a new content and enter datas but it is displayed on the line.

How to do to select/create an accordion formatter ?

I've tested with field group module but it displays all paragraph element in the same accordion item.

Thank you for your help.

CommentFileSizeAuthor
#4 custom_accordion.zip21.44 KBtfranz

Comments

selinav created an issue. See original summary.

Harish kumhar’s picture

  • You need to create 2 paragraph types which can be (For Ex : Accordion,Accordion List).
  • Accordion paragraph field - Paragraph Entity reference (Accordion List).
  • Accordion List paragraph field - title and body.
  • Add paragraph in my content type.
  • Override parent paragraph twig file.
  • Get all the require fields data into twig file.
  • Follow the necessary things for Accordion in twig html structure.
    For Ex: Accordion

maybe it will help you.
Thanks.

dineshreddymathuku’s picture

Status: Active » Needs review

hi @selinav here is the solution and check this link once it's more helpful
https://www.drupal.org/project/uswds_paragraphs/issues/2895878
Create 2 new paragraph types:
- Accordion: Contains any number of references to Accordion Item paragraphs (see below). Also contains a checkbox for allowing multiple items to be expanded at once. Also contains a checkbox for setting the first item to start expanded.
- Accordion Item: Contains any number of references to other paragraph
thanks

tfranz’s picture

StatusFileSize
new21.44 KB

Attached is my custom module with (at least for me) a working accordion for paragraph as a starting point for your own development. It does the following on install:

1. Create two paragraph-types "accordion" and "accordion-item"
2. Create reference-field from "accordion" to "accordion-item" with title- & body-field
3. Template for the accordion-type (the "accordion formatter")
4. Attach libraries (js & css) for simple functionality

After install you can create a paragraph type "Accordion" (not "Accordion Item").

Next step could be to attach jQuery UI Accordion or something like that for some smooth animations.

selinav’s picture

Thank you for your help.

calbasi’s picture

smustgrave’s picture

Status: Needs review » Closed (works as designed)

Question appears to have been answered