Contrib.social

Accordion not opening

Open on Drupal.org →
Created on 21 July 2023, almost 2 years ago
Updated 9 January 2024, over 1 year ago

Problem/Motivation

Currently, when setting up a view using this module's formatter, the closed accordion will appear, but it can not be opened, no JS error, nothing.

Using:

  • Drupal Version: 10.1.1
  • PHP Version: 8.2.3
  • "drupal/views_accordion_foundation": "^2.0"
  • "drupal/foundation_sites": "^2.0"
  • "npm-asset/foundation-sites": "^6.7"
  • "npm-asset/motion-ui": "^2.0"

Steps to reproduce

  • Require the module via composer and require both npm-asset libraries.
  • Create a view using the Accordion formatter with the default settings
  • Add both a Title (Content) and Body (Content) field
  • Save the view and go to its page

The output will look something like this:

This seems correct, but the accordion can't be opened. There are no javascript errors and the HTML also looks fine with the anchor tags linking to the correct id. The javascript files are also all loaded, see:

Here are the view settings I used:

uuid: bb57552c-5ae1-4399-8881-efd58197c680
langcode: en
status: true
dependencies:
  config:
    - field.storage.node.body
  module:
    - node
    - text
    - user
    - views_accordion_foundation
id: test
label: test
module: views
description: ''
tag: ''
base_table: node_field_data
base_field: nid
display:
  default:
    id: default
    display_title: Default
    display_plugin: default
    position: 0
    display_options:
      title: test
      fields:
        title:
          id: title
          table: node_field_data
          field: title
          relationship: none
          group_type: group
          admin_label: ''
          entity_type: node
          entity_field: title
          plugin_id: field
          label: ''
          exclude: false
          alter:
            alter_text: false
            make_link: false
            absolute: false
            word_boundary: false
            ellipsis: false
            strip_tags: false
            trim: false
            html: false
          element_type: ''
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: true
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: value
          type: string
          settings:
            link_to_entity: true
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
        body:
          id: body
          table: node__body
          field: body
          relationship: none
          group_type: group
          admin_label: ''
          plugin_id: field
          label: ''
          exclude: false
          alter:
            alter_text: false
            text: ''
            make_link: false
            path: ''
            absolute: false
            external: false
            replace_spaces: false
            path_case: none
            trim_whitespace: false
            alt: ''
            rel: ''
            link_class: ''
            prefix: ''
            suffix: ''
            target: ''
            nl2br: false
            max_length: 0
            word_boundary: true
            ellipsis: true
            more_link: false
            more_link_text: ''
            more_link_path: ''
            strip_tags: false
            trim: false
            preserve_tags: ''
            html: false
          element_type: ''
          element_class: ''
          element_label_type: ''
          element_label_class: ''
          element_label_colon: false
          element_wrapper_type: ''
          element_wrapper_class: ''
          element_default_classes: true
          empty: ''
          hide_empty: false
          empty_zero: false
          hide_alter_empty: true
          click_sort_column: value
          type: text_default
          settings: {  }
          group_column: value
          group_columns: {  }
          group_rows: true
          delta_limit: 0
          delta_offset: 0
          delta_reversed: false
          delta_first_last: false
          multi_type: separator
          separator: ', '
          field_api_classes: false
      pager:
        type: mini
        options:
          offset: 0
          items_per_page: 10
          total_pages: null
          id: 0
          tags:
            next: ››
            previous: ‹‹
          expose:
            items_per_page: false
            items_per_page_label: 'Items per page'
            items_per_page_options: '5, 10, 25, 50'
            items_per_page_options_all: false
            items_per_page_options_all_label: '- All -'
            offset: false
            offset_label: Offset
      exposed_form:
        type: basic
        options:
          submit_button: Apply
          reset_button: false
          reset_button_label: Reset
          exposed_sorts_label: 'Sort by'
          expose_sort_order: true
          sort_asc_label: Asc
          sort_desc_label: Desc
      access:
        type: perm
        options:
          perm: 'access content'
      cache:
        type: tag
        options: {  }
      empty: {  }
      sorts:
        created:
          id: created
          table: node_field_data
          field: created
          relationship: none
          group_type: group
          admin_label: ''
          entity_type: node
          entity_field: created
          plugin_id: date
          order: DESC
          expose:
            label: ''
            field_identifier: ''
          exposed: false
          granularity: second
      arguments: {  }
      filters:
        status:
          id: status
          table: node_field_data
          field: status
          entity_type: node
          entity_field: status
          plugin_id: boolean
          value: '1'
          group: 1
          expose:
            operator: ''
      style:
        type: views_accordion_foundation
        options:
          grouping: {  }
          row_class: ''
          default_row_class: true
          row-start-open: '1'
          multi-expand: 0
          allow-all-closed: 0
          tabs-small: 1
          tabs-medium: 0
          tabs-large: 0
          disabled: 0
          deep-link: 1
          deep-link-smudge: 0
          deep-link-smudge-delay: 300
          deep-link-update-history: 0
          slide-speed: 250
          wrapper_class: ''
          class: ''
      row:
        type: fields
        options:
          default_field_elements: true
          inline: {  }
          separator: ''
          hide_empty: false
      query:
        type: views_query
        options:
          query_comment: ''
          disable_sql_rewrite: false
          distinct: false
          replica: false
          query_tags: {  }
      relationships: {  }
      header: {  }
      footer: {  }
      display_extenders: {  }
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url.query_args
        - 'user.node_grants:view'
        - user.permissions
      tags:
        - 'config:field.storage.node.body'
  page_1:
    id: page_1
    display_title: Page
    display_plugin: page
    position: 1
    display_options:
      display_extenders: {  }
      path: test
    cache_metadata:
      max-age: -1
      contexts:
        - 'languages:language_content'
        - 'languages:language_interface'
        - url.query_args
        - 'user.node_grants:view'
        - user.permissions
      tags:
        - 'config:field.storage.node.body'

And here is the HTML of one of the accordion items together with the twig debug data:

<li class="is-active accordion-item" data-accordion-item="">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_accordion_foundation_view_fields' -->
<!-- BEGIN OUTPUT from 'modules/contrib/views_accordion_foundation/templates/views-accordion-foundation-view-fields.html.twig' -->
        <a href="#zf-acc-41ab4691ef50564578c6eb944f67f160fb0cce88b4ff11c09f301a149c5fc091-0" class="accordion-title">  

  <div class="views-field views-field-title">
  
      <span class="field-content">                  




Accumsan Facilisi Vereor


  </span>
  </div>
          </a>
        <div class="accordion-content" data-tab-content="" id="zf-acc-41ab4691ef50564578c6eb944f67f160fb0cce88b4ff11c09f301a149c5fc091-0">  

  <div class="views-field views-field-type">
  
      <span class="field-content">

<!-- THEME DEBUG -->
<!-- THEME HOOK: 'views_view_field' -->
<!-- BEGIN OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' -->
<a href="/admin/structure/types/manage/article">Article</a>
<!-- END OUTPUT from 'core/modules/views/templates/views-view-field.html.twig' -->

  </span>
  </div>
          </div>
<!-- END OUTPUT from 'modules/contrib/views_accordion_foundation/templates/views-accordion-foundation-view-fields.html.twig' -->

</li>

No idea what the issue could be 😶‍🌫️.

Proposed resolution

Find the problem and fix it.

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Postponed: needs info

Version

2.0

Component

Code

Created by

🇩🇪Germany Grevil

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @Grevil
  • Assigned to thomas.frobieter
  • Comment almost 2 years ago →
    🇩🇪Germany Anybody Porta Westfalica

    No idea. It's still working on all client projects. I can just imagine the required Foundation JS library is missing. Any ideas @thomas.frobieter?

  • Comment almost 2 years ago →
    🇩🇪Germany Grevil

    Note, that I could replicate this issue on both 2.x stable, and 2.x-dev! With module reinstallation, cache clearing and creating new views for both installations.

  • Comment almost 2 years ago →
    🇩🇪Germany Grevil

    > I can just imagine the required Foundation JS library is missing

    Don't think so, see screenshots provided! All required js files are loaded.

  • Comment almost 2 years ago →
    thomas.frobieter EU

    I could have a look on this after my holidays.

    If you want to dig into this, I'd suggest to check for the click event:

    And the Foundation documentation examples: https://get.foundation/sites/docs/accordion.html

  • Assigned to Grevil
  • Comment almost 2 years ago →
    🇩🇪Germany Anybody Porta Westfalica

    @Grevil: Please compare the expected structure with the resulting structure: https://get.foundation/sites/docs/accordion.html

    In the issue summary please add the outer UL to the code, so we can see what that one looks like.

  • Comment over 1 year ago →
    🇬🇧United Kingdom c_archer Cumbria

    I've come across the same issue, altho I'm not using this module just using the Zurb lib via the CDN and code direct in the twig template. It looks like Drupal is doing something here, taking the code out of Drupal it then works.

  • Issue was unassigned.
  • Status changed to Postponed: needs info over 1 year ago
  • Comment over 1 year ago →
    🇩🇪Germany Anybody Porta Westfalica

    Setting priority back to normal, as we didn't see this in the wild and #7 says it's not caused by this module but potentially by a Conflict in Drupal!

    One reason why we're not seeing this in the wild is, that our theme based on zurb_foundation works with it correctly.
    The screenshot above looks like Olivero?

    That might lead us on the right track... So perhaps someone should try if it works correctly with zurb_foundation theme.

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024