Link to nestable tab

How To
1

Hello, is it possible to have a url link directly to a nestable tab? Basically have it open when the page loads if a parameter is present in the url.

2

If anyone is interested, I managed to do this by adding the desired id (e.g. ā€œ#amsterdam-titleā€ and ā€œ#amsterdam-contentā€) to the tab titles and panes and using the following script.

<script>
	jQuery(document).ready(function( $ ) {

    var hash = window.location.hash;

    if(hash && $(hash + '-title').length != 0){
      $( ".tab-title, .tab-pane" ).each(function() {
        $(this).removeClass('brx-open');
      });

    	$(hash + '-title').addClass('brx-open');
    	$(hash + '-content').addClass('brx-open');
    }

  });
</script>
2 Likes
3

Hi @Kyriakos
thank you
I donā€™t get it. I have 5 tabs with idā€™s #mytab-1 to 5 and content with idā€™s #mycontent-1 to 5
How do I get a url to open any of them?

4

If you want my script to work you have to name the ids the same way because the script looks for the ā€œtitleā€ and ā€œcontentā€ part in the id name.

e.g.

#mytab1-title
#mytab1-content
#mytab2-title
#mytab2-content

5

Thank you

I have changed the 5 TITLES(the div in which the text element with title name) and PANES to;
#mytab1-title
#mytab2-title
#mytab3-title
#mytab4-title
#mytab5-title
AND
#mytab1-content
#mytab2-content
#mytab3-content
#mytab4-content
#mytab5-content

What should the url then be?? Example: https://mysite.com/page/#mytab1-title

I have then added your code exactly as is and to run site-wide.

6

The url should be https://mysite.com/page/#mytab1

7

Hi

can it be that your script & solution do no longer work anymore in Bricks v1.8.3?

Thanks

Patric

8

Hi

in case somebody needs thisā€¦

It seems that with v1.8.3, when the page with the nested tab is loaded, the first nested tab that is opened by bricks per standard is not always closed by the script by removing the brx-open class.

So I solved it by adding an interaction to the first tab that should NOT be open but that WAS always open despite the #-tag in the url.

Add an interaction like below to the Div (for the tab title) and to the Panel (for the tab content) for the TAB THAT SHOULD BE CLOSED WHEN THE PAGE IS LOADED VIA THE LINK.

The script above will still take care that the tab from the #url is opened, so at least for me, no other interactions were necessary.

tabopen
tabopen292Ɨ921 24 KB

Cheers

Patric

9

Hi

no with Bricks v1.8.6 this functionality is built-in and therefore this code etc. is no longer necessary.

It just works out of the box.

2048Ɨ512 62.2 KB

Cheers

Patric

10

Doesnā€™t work :
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?

11

Good morning

it works for me.

I use a text link element, use ā€œexternal urlā€ and the link in the format

https://ā€¦siteā€¦/ā€¦pageā€¦/#ā€¦

as the link and it works without any problems. The page is loaded and the chosen tab is opened.

It also works if I chose ā€œopen in new tabā€ or not.

Cheers

Patric

12

Could you please share a screenshot or video of your setup with me? It appears to be the same setup Iā€™m using, and it seems Iā€™m not the only one encountering this problem.

13

Here you go.

The nestable tab:

Linka

Linkc
Linkc309Ɨ798 25.6 KB

Linkb

The text link on another page:

Link1
Link1288Ɨ688 17.6 KB

Cheers

Patric

1 Like
14

Ok, but does it function within the same browser tab, without having to ā€˜open in a new tabā€™? Because thatā€™s the specific issue Iā€™m facing.

15

The problem seems to be when the link element is on the same page. For example if you have a landing page with a table of contents at the top, you want to scroll to and open the relevant tab, doesnā€™t work.
Itā€™s not clear from the release notes whether this is intentional or was overlooked.

16

Yes, it also works in the same browser tab. Does not make any difference. In my screen shot the ā€œopen in new tabā€ is only selected because I was testing if it also works in that way. And it does.

18

Hi Patric
Thanks. Yes hopefully it is possible and will be in the next update.
All the best

1 Like
19

Yeah, I quickly tested it and indeed it does not work if the text link is on the same page as the nestable tab to be opened.

Cheers

Patric

2 Likes
20

So do you confirm the bug ?