backdrop-contrib/paragraphs_jquery_ui_accordion

An accordion display for paragraph title and description content on Backdrop CMS

Paragraphs jQuery UI Accordion

Paragraphs jQuery UI Accordion is a module to create paragraphs with accordion effect in your content.

It based on jQuery UI Accordion plugin which already included in core, so no need to install additional libraries. See examples on https://jqueryui.com/accordion/

Features

• Ability to use it together with other paragraphs bundles
• 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
• Completely standalone and flexible (not depends on specific entity types and fields)

Installation

• Ensure Paragraphs module is enabled.
• Install this module using the official Backdrop CMS instructions.

Usage

• Create new paragraphs bundle eg. 'accordion_paragraph'
• Add text fields for Title and Description to created bundle
• 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 for the format
• Select proper fields for Title and Description
• You are now ready to add Accordions to your entity!

If you need to include more than one field as the Description or you need to include an Entity Reference field, you could use Paragraphs jQuery UI Accordion 2, which is a fork of this module that uses paragraph display modes instead of selecting an individual Description field.

Issues

Bugs should be reported in the Issue Queue.

Current Maintainers

• Alan Mels of AltaGrade
• Martin Price - System Horizons Ltd

Credits

Created for Drupal by Maksym Shakhrai

Ported to Backdrop by Alan Mels

License

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

paragraphs_jquery_ui_accordion's Issues

Notice: Trying to access array offset on value of type null

We are seeing this notice in a site.

Notice: Trying to access array offset on value of type null in paragraphs_jquery_ui_accordion_field_formatter_view() (line 145 of .../modules/contrib/paragraphs_jquery_ui_accordion/paragraphs_jquery_ui_accordion.module).

We have not had time to debug this or provide additional information. But, opening ticket in case others are seeing anything similar. I'll try to provide more information as we look deeper into this issue.

Paragraph Type with Entity Reference does not work

Steps to reproduce

1. Create a paragraph type with a text field for the title and an entity reference field that can reference one or more types of node
2. Manage the display of paragraph entity reference field to be Rendered entity
3. Enable that paragraph type in a content type
4. Create content and add one or more of these paragraphs with a title and an entity
5. First set the content type display for the field to "Paragraph items" and verify that the entity is rendered
6. Next switch it to paragraphs jQuery Accordion and set the bundle type, the title and the content to point to the paragraph type, title field and entity reference field respectively.
7. View the node

Results

Expected

Referenced entity is rendered within accordion content

Actual

content is not displayed. content includes just the title of the entity in plain text. (note - tested with display of Label with Link and entity id and it still just showed a plain text title in the accordion content.

Note

On content types where I have a direct entity reference field and use field group to add a containing accordion group and accordion item, then the referenced entity is rendered in the accordion content.

Start Closed checkbox not changing anything

I had a strange problem this afternoon when I wanted to have an accordion start open. Start closed is not checked. My config file has "startclosed": 0, in it.

However after going to the page with the accordion, it is still closed. When I view source of the page and search for closed I see "startclosed":true.

It shouldn't ever say true, it should either be a 0 or 1.

I am quite confused by this. I should note that the Auto scroll checkbox does the same thing.

Display formatter: field instances should be distinct

Right now the setting are combining the field instances. If paragraphs are sharing fields then it'll show the field title on either one or the other - it won't be clear if you've got the right one.

Ideally choosing the paragraph bundle would filter the field options. But at the very least I think each field instance should be listed separately. And maybe put the machine name as well.

Uncaught Error: Syntax error, unrecognized expression: a[href*=

Tests have proven the issue initially reported for core on #1 in fact belongs to this project instead.

Creating anchor menu items like #anchor as work as expected on UI, however on browser's console start giving lot's of incidents of the same errors:

Uncaught Error: Syntax error, unrecognized expression: a[href*=#faq]

because the javascript contains the following line:

var paragraph = $(accordion_id).find('a[href*="+ thash + "]').closest('h3');

does not escape special characters as recommended on https://api.jquery.com/category/selectors/

Multiple nested accordion paragraphs nested in a single paragraphs field don't work

Steps to reproduce

1. Add a paragraph type that has a paragraph field
2. Allow all paragraph types that are suitable for use in an accordion
3. Set display mode for field to be 'Paragraphs jQuery UI Accordion 2'
4. Ensure that paragraph type is allowed for a paragraph field on a content type
5. Create new content and add paragraphs including two of the new type you created (it's easier to see if you add other paragraph types in between.

Expected result
All accordion paragraphs work

Actual result
Only first accordion paragraph works

The PR added as the fix for #7 while fixing the two fields use case broke it for 2 accordions in a single field.

The solution is to have the accordion id made of both the field name and the entity id. In this case, the entity id becomes the paragraph item.

This is the same as backdrop-contrib/paragraphs_jquery_ui_accordion2#2

Allow content element to be some or all fields except title

I wonder if it is possible for the content of a paragraph bundle to be more than one field. It would be desirable to be able to add more than one field such as text and image, text and links and possibly other content also.

Depending what is simplest, it could either be that content is multi-select so each field is positively selected to be part of content, or it could be that whatever fields are not the title would be included (unless hidden in the display).

Add Martin Price as co-maintainer and add reference to fork

To add Martin Price (yorkshire-pudding) as co-maintainer
To add a reference to Paragraphs jQuery UI Accordion 2

Start off completely closed?

Would it be possible to have a setting that allowed the accordion to start off completely closed instead of the first one being opened automatically?

Use buttons instead of links for proper accessibility

An accessibility review for a site that uses this module suggested that we should be using buttons, not links, for proper accessibility. Here is a model:

• https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/#sc1_label

I am going to see if this is fairly quick and easy to change, and if so I will submit a PR here.

Multiple accordions are not working at once

I was trying to use multiple paragraphs jquery UI accordion in a site, but its not working. Every time first one is working but not the others.
Steps to reproduce:

1. Create a paragraph type called Accordion one with two field
   • Accordion Title
   • Accordion body
2. Create another paragraph type called Accordion two with another two field
   • Title
   • Body
3. You can edit any content type, go to the manage fields(/admin/structure/types/manage/page/fields), and create two-paragraph reference fields.
   • Accordion one refers to the Accordion one(paragraph type)
   • Accordion two refers to the Accordion two(paragraph type)
4. Then go to the manage display(/admin/structure/types/manage/accordion/display/default) and make these two field Format as Paragraphs jQuery UI Accordion and configured these fields.
5. Create content(/node/add/page) and add some accordion in Accordion one and Accordion two fields.
6. Now you can see the Accordion one is working perfectly and Accordion two is not.