- Issue created by @SirClickALot
- 🇺🇸United States kwiseman
I just tried setting up a Views Bootstrap accordion with a Drupal 10.4 site and have also noticed that the accordion buttons don't open their content. However, I have aggregation turned off. In my view, I've set accordion grouping to "Accordion content by grouped field" (in other words, group the output).
For accordions with grouped output only, I noticed that invalid HTML ids were being generated for the accordion's header and the
<div>holding the accordion's body (lines 30 and 35 of views-bootstrap-accordion.html.twig). The invalid part of their IDs comes from a xss-filtered version of the accordion button's text set as an array key in the preprocess function for the accordion template (line 55 of views_bootstrap.theme.inc, I think). When I cleaned the filtered button text to make sure it works as an HTML id, the accordions began to work for me.@sirclickalot, are your accordions grouped too? Maintainers, does what I'm experiencing sound like a separate issue? If so, I'll be happy to make that issue, elaborate, and/or provide the MR.
- 🇮🇳India ravi kant Jaipur
The issue is not replacing for me.
Using -
1. Drupal-10.4
2. Views_bootstrap 5.5.0-rc3.
3. Bootstrap5 → - 🇺🇸United States shelane
kwiseman: this may be related and I would appreciate an MR for the fix you found.
- 🇺🇸United States kwiseman
I want to mention some details about what I'm experiencing. I've created a brand new, local Drupal 10.4.5 site with the standard profile using the Bootstrap5 theme and the 5.5.x branch of Views Bootstrap. I just realized that the issue only occurs for me when twig development mode is enabled (along with "Accordion grouping" set to "Accordion content by grouped field"). Perhaps having twig development mode off is the reason @ravi-kant was unable to recreate the issue.
When twig dev mode is enabled, the extra output adds a bunch of new line characters which end up as white space in the HTML ids of the
<div>s holding the accordion bodies. Still not sure why the invalid ids are breaking the accordions, but I'm working on a fix. - Merge request !53Fix invalid HTML ids from $filtered_title when twig debug enabled. → (Open) created by kwiseman
- 🇺🇸United States shaunlaws
To allow us to get past this issue on a site we are developing, I generated this patch from the changes in MR 53 against Views Bootstrap 5.5.0-rc3. It fixes the problem that we were seeing - as stated previously, the id was badly formed:
<div id="views-bootstrap-prime-contract-block-2-collapse-Section J: List of Documents, Exhibits, and Other Attachments &gt;" class="accordion-collapse collapse " aria-labelledby="headingSection J: List of Documents, Exhibits, and Other Attachments &gt;" data-bs-parent="#views-bootstrap-prime-contract-block-2"> ... </div>and the following was reported in the browser console:
SyntaxError: '#views-bootstrap-prime-contract-block-2-collapse-Section J: List of Documents, Exhibits, and Other Attachments >' is not a valid selector.Applying the patch resulted in the following valid id and the console error disappeared:
<div id="views-bootstrap-prime-contract-block-2-collapse--section-j-list-of-documents-exhibits-and-other-attachments-gt" class="accordion-collapse collapse show" aria-labelledby="heading-section-j-list-of-documents-exhibits-and-other-attachments-gt" data-bs-parent="#views-bootstrap-prime-contract-block-2" style=""> ... </div>In our case it didn't seem to be related to either twig debugging or core aggregation. Having either or both of these disabled / enabled didn't affect anything - it appeared related only to the div di being invalid.