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

**URL:** <https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676>\
**Category:** Bugs\
**Tags:** v1-8-6\
**Created:** [August 17, 2023, 1:03am UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676 "2023-08-17T01:03:51Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![g97iulio](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/g/54ee81/32.png) [@g97iulio](https://forum.bricksbuilder.io/u/g97iulio)\
**Post date:** [August 17, 2023, 1:03am UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/1 "2023-08-17T01:03:51Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![Patric](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/p/4da419/32.png) [@Patric](https://forum.bricksbuilder.io/u/Patric)\
**Post date:** [August 17, 2023, 8:26am UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/2 "2023-08-17T08:26:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![g97iulio](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/g/54ee81/32.png) [@g97iulio](https://forum.bricksbuilder.io/u/g97iulio)\
**Post date:** [August 17, 2023, 10:49am UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/3 "2023-08-17T10:49:59Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wplit](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/wplit/32/2730_2.png) [@wplit](https://forum.bricksbuilder.io/u/wplit)\
**Post date:** [August 17, 2023, 12:21pm UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/4 "2023-08-17T12:21:08Z")

</div>

“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.

---

<div class="post-metadata">

**Author:** ![g97iulio](https://forum.bricksbuilder.io/letter_avatar_proxy/v4/letter/g/54ee81/32.png) [@g97iulio](https://forum.bricksbuilder.io/u/g97iulio)\
**Post date:** [August 17, 2023, 12:24pm UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/5 "2023-08-17T12:24:37Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wplit](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/wplit/32/2730_2.png) [@wplit](https://forum.bricksbuilder.io/u/wplit)\
**Post date:** [August 17, 2023, 12:42pm UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/6 "2023-08-17T12:42:05Z")

</div>

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.

> <https://gist.github.com/wplit/909924ad92a2115d25cc99612421db36>

---

<div class="post-metadata">

**Author:** ![itchycode](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/itchycode/32/4542_2.png) [@itchycode](https://forum.bricksbuilder.io/u/itchycode)\
**Post date:** [August 17, 2023, 1:50pm UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/7 "2023-08-17T13:50:17Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![aslotta](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/aslotta/32/5419_2.png) [@aslotta](https://forum.bricksbuilder.io/u/aslotta)\
**Post date:** [September 3, 2023, 7:09pm UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/8 "2023-09-03T19:09:59Z")

</div>

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é

---

<div class="post-metadata">

**Author:** ![Jo\_Eder](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/jo_eder/32/6253_2.png) [@Jo\_Eder](https://forum.bricksbuilder.io/u/Jo_Eder)\
**Post date:** [September 22, 2023, 11:26am UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/9 "2023-09-22T11:26:49Z")

</div>

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…

---

<div class="post-metadata">

**Author:** ![Bloggs](https://forum.bricksbuilder.io/user_avatar/forum.bricksbuilder.io/bloggs/32/11010_2.png) [@Bloggs](https://forum.bricksbuilder.io/u/Bloggs)\
**Post date:** [November 2, 2023, 9:55am UTC](https://forum.bricksbuilder.io/t/solved-direct-link-doesnt-work-with-nestable-tabs-and-accordion-using-anchor-links/14676/10 "2023-11-02T09:55:58Z")

</div>

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?

```auto
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');
      }
    });
  });
});

```
