Open specific item by named anchor

We had the same need. I implemented this via a small change to the Javascript code. Attached is a patch; not sure if this should be somehow optional instead of default behavior?

Minor change on the patches above to make it so that anchors to accordions on the same page work.

+1 RTBC. Thank you so much for adding this functionality!

The patch in #5 works perfectly! Thank you all for this!

This works exactly as described which is great. I have a slightly more complicated situation / ask that i'm trying to work out on my site.

We have accordions living within CK Editor Bootstrap tabs on some pages of our site. So a page may have a few tabs and different accordions within each.

If the accordion is placed within the first tab it opens as expected when linked to with this patch. If the accordion is located inside of a tab that is not on the page as it loads, the tab is not switched to but the accordion is open if that tab is navigated to.

Any suggestion on how to approach this situation and be able to link to accordions within any tab?

Thanks in advance!

Does anyone have a patch for ckeditor accordion-2.0.1.? There is no ckeditor-accordion.js file in the new version. There is an accordion.frontend.js file.

With the move to native JS, the existing patch is out of date. I've pushed out a new dev release that adds a configuration option to /admin/config/content/ckeditor-accordion to enable this functionality. Can you check it out @Skarbimir and let me know if it works for you?

https://www.drupal.org/project/ckeditor_accordion/releases/2.x-dev

Unfortunately, nothing has changed for me in /admin/config/content/ckeditor-accordion. There is no new option. (Drupal 9.5.1. But it's very good idea to enable this functionality in config.

Well for some reason my latest changes in 2.0.x don't appear as a new dev release. But I got the module tested out with that specific commit and there's now a release 2.0.2 to add this functionality into the config. It'll be disabled by default so existing accordions don't get it.

Let me know how it's working out for you!

It works for me in with both ckeditor 4 and 5 versions. One more question. How to change the ID format to #home_product instead of #HomeProducts as it is now. That is, changing the letters to lowercase and the space to the underline symbol.

You'll need to patch out js/accordion.frontend.js file line 159 for that, something like the following would work
let tabHash = tabText.replace(/[^A-Za-z0-9 ]/g, "").replace(' ', '-').toLowerCase();

I'll leave this version as it is so that sites that already have been using the patch will have their functionality work the same as it did.

Thanks for your help testing this out!

And @sbrenner02, you'd need to write some custom JS for a solution in this case. Something to check if an accordion row with current hash exists, open the tab that the accordion row resides inside. You can probably fire off an .click() event on the tab link / button to do so.

I noticed that in version 2.0.2 the function "Keep accordion rows open when opening another one" does not work. When an accordion opens, the previous one does not close, whether this option is checked or not.

To get the format "#home-product" not as default "#HomeProducts"
"let tabHash = tabText.replace(/[^A-Za-z0-9 ]/g, "").replace(' ', '-').toLowerCase();"

To get the format "#home_product" not as default "#HomeProducts"
"let tabHash = tabText.replace(/[^A-Za-z0-9 ]/g, "").replace(' ', '_').toLowerCase();"

Working. Thanks for the help.

I found one more error in the abow script for changing link:

When script is changing a two-letter title, correctly adds a '_' character between words. But if there is a 3-word title, it gives '%20' in place of the second space. So for example '#home_and%20garden' and it should be '#home_and_garden'

Try replacing .replace with .replaceAll, that should do it.

And clear your cache once you've changed your settings if the changes to settings don't apply straight away.

Thanks. #21 Works perfectly