SOLVED: Direct Link doesn't work with Nestable Tabs and Accordion Using Anchor Links

Bugs
1

@thomas Version 1.8.6.
I tried using the new Nestable tabs and Accordion with anchor links. The problem is that they don’t work unless through a direct link in the browser’s address bar. If I call them through a link inserted as an element, they don’t work. For the setting, I put the ID including an # in the external link, so for example:
Div tab ID: #tab1
External connection link: #tab1
Has anyone managed to use them?

2

Hi all

so after testing, it seems the direct link & opening with nestable tabs and accordions from Bricks v.1.8.6 does work via the menu link or via a text link that is on another page.

If the text link is on the same page as the targeted nestable tab to be opened, it does not work, i.e. nothing happens when you click on the text link.

Cheers

Patric

3

Indeed, there seems to be a bug. I’ve tried multiple times, and even the basic setup provided in the documentation’s example doesn’t work

4

“it seems the direct link & opening with nestable tabs and accordions from Bricks v.1.8.6 does work via the menu link or via a text link that is on another page .”

This was the feature that was added. It’s watching the URL for the hash when the page loads, it isn’t listening for clicks on the current page.

2 Likes
5

oh that’s really disappointing, any workaround to work with “scroll” ?

6

The workaround would be the old fashioned way, javascript. This code should work, just replace ‘.my-link’ with the selector of any links that you need to listen for the click to open either the tab or accordion.

2 Likes
7

Hi @g97iulio ,

As @wplit said, we implemented this only on page load.
However, agree that we should have this feature when clicking on links well.
Just created 1 task internally as an improvement.

Regards,
Jenn

4 Likes
8

Hey @g97iulio,

we’ve adjusted the behavior in Bricks 1.9, now available as a one-click update in your WordPress Dashboard.

Please let us know if it works as expected.

Best,

André

9

I think now (1.9) the first accordion in a section is opened by default whenever an anchor link is clicked even though the anchor is just referencing the section and not the accordion…

10

Hey guys @wplit @timmse @aslotta, I was hoping you could help.

I’ve got a text link on the page and I’m opening an accordion with it.
When the link with class .how-to is clicked, it scrolls down to the the section #woo-faqs.

Here I’m using ACF repeater as a Nested Accordion. Clicking the link scrolls down to the accordion section #woo-faqs and opens the first accordion with class .accordion-repeater by giving it the additional class .brx-open.

This is all working great, the class is added, accordion opens as expected. When the accordion is manually closed, the additional .brx-open class is again removed, all as expected.

But the issue now is that if the link is clicked again, the .brx-open class is added again, which is correct, however the accordion now doesn’t re-open.

Even if the class .brx-open is present, the accordion doesn’t appear opened.

Below here is my current code taken from what @wplit posted earlier in one of the answers.

Any ideas how could I fix that?

document.addEventListener("DOMContentLoaded", () => {
  const linkSelector = '.how-to'; // Selector for the link with class .how-to
  const sectionId = '#woo-faqs'; // ID of the section you want to scroll to
  const elementClass = '.accordion-repeater'; // Class of the elements you want to simulate click on

  document.querySelectorAll(linkSelector).forEach(link => {
    link.addEventListener('click', (event) => {
      event.preventDefault(); // Prevent the default behavior of the link click
      
      // Scroll to the target section with smooth behavior
      document.querySelector(sectionId).scrollIntoView({ behavior: 'smooth' });
      
      // Find the first element with class .accordion-repeater inside the section and simulate click
      const targetElement = document.querySelector(sectionId).querySelector(elementClass);
      if (targetElement) {
        targetElement.click();

        // Add the .brx-open class to the clicked element
        targetElement.classList.add('brx-open');
      }
    });
  });
});
1 Like