Add an "Active" class to buttons based on anchor tag

[thisisbbc]

Hello there,

We’re trying to replace the Tabs element menu by separate buttons we can place where we want.

We were able to add some javascript that adds an “Active” class on these buttons when they are clicked. It works well.

Now we’d like to improve a few things regarding UX…

Q1) The default tab opened is “About” when you access the page. How can we add the “Active” class to the default opened tab, before the user clicks on anything and there’s no anchor tag in the URL?

Q2) Can we change the default opened tab?

Q3) Assuming a visitor access a tabs directly with an anchor tag in the URL, like /creator-demo/#collections, how can we have the “Collections” button to get the “Active” class on page load? We tried the following code, without luck:

jQuery(document).ready(function($) {
    $(function() {
      $('#creator-menu .x-col a.x-anchor[href^="/' + location.pathname.split("/")[1] + '"]').addClass('active');
    });
})

Thank you!

[christopher]

Hi @thisisbbc,

Please kindly consider that this is a customization request and outside of our support scope, we will do our best to help you out understand the Javascript details but we will not be able to implement the feature for you. The best method will be to hire a developer to implement the customization.

Unfortunately, the given URL does not work and it goes to a Page Not Found message and I do not see any Tab Element. Maybe because the page is not published and we do not have access.

I also did not understand exactly what you are trying to achieve. Do you have separate elements that trigger the click of a specific tab?

Q1) The default opened tab is the first tab which is active. I am not sure what do you mean by adding an active class to the opened one as it is the default behavior of the tab element.

Q2) The Tab element does not have such a feature. A workaround is to go to the Tab in question and click the Customize tab and add a class for the Tab:

Then you can add the Javascript code below to the JS section of the in the builder:

jQuery('.tab2').trigger('click');

I assumed you added tab2 as the class name. It is not a perfect solution as the first tab will first load and then it will switch to the other tab, so there will be a lag for a second.

Q3) The Tab element does not have such hash functionality and it does not change the URL of the page. Click here for more information.

Thank you.

[thisisbbc]

Hello @christopher.amirian,

Thank you for the detailed reply and I appreciate the help although I understand this is a bit outside the scope of the support you can provide. I have edited the link in the secure note, apologies for that.

You understood correctly. The goal I want to achieve here is to have the custom links we use to navigate through the tabs element highlighted properly on page load. Currently, this only work after the user clicks on a menu. I’d like this to work regardless if we’re accessing the naked page URL or an URL containing an anchor link like “#creations”. Hope it makes sense.

Q1) What I mean here is that I want to add the “active” class to a custom link on page load. I do not use the tabs for navigation and I have separate links/buttons to navigate through the tabs. This allow us to put the navigation wherever we want, rather than on top of the tab panels.

Maybe the best way to solve this is to add the “active” class directly in the HTML of the link that corresponds to the first tab of the tab element since this will be the default opened tab. Then the JS I have added should take care of removing any “active” class before adding it back to the link the user clicked on.

Here’s the JS I use currently:

jQuery(document).ready(function($) {
  
  $('#creator-menu .x-col a.x-anchor').click(function(e) {
		$('a').removeClass('active');
		$(this).addClass('active');
	});

})

-> That’s what I did and it works pretty well! However, this doesn’t fix Q3 which I’ll discuss later.

Q2) All good, I wanted to know if I missed something but I’ll switch the tab order now that I know how to change the default opened one.

Q3) So the last part to improve UI/UX would be to get the “active” class on the right button/link when accessing the URL directly with an anchor link. For example, if you add “#creations” at the end of the URL in the secure note, you’ll effectively have the page loading with the “Creations” tab open, but the link in the navigation will not be highlighted, instead it will be the “About” menu that will be highlighted.

Maybe we can alter the JS I added slightly so that it’s also triggered if there’s an anchor link in the URL?

Thanks again for your help!

[albrecht]

Hey @thisisbbc,

We’re glad to hear that both Q1 & Q2 are now good.

Regarding Q3, I adjusted your code a bit. Try this javascript below.

jQuery(document).ready(function($) {
    jQuery(function() {
            jQuery('#creator-menu .x-col a.x-anchor[href*="' + location.href.split("#")[1] + '"]').addClass('active');
    });
})

Hope it helps.

[thisisbbc]

Hey @albrechtx,

Thanks for the provided snippet.

We’re getting there but now if we load the page with the #about anchor tag, you’ll have both the “Creations” and “About” links highlighted.

Here’s the code I have:

jQuery(document).ready(function($) {
  
$('#creator-menu .x-col a.x-anchor').click(function(e) {
		$('a').removeClass('active');
		$(this).addClass('active');
});
  
$(function() {
  	$('#creator-menu .x-col a.x-anchor[href*="' + location.href.split("#")[1] + '"]').addClass('active');
});

}) 

Since the function isn’t wrapped in a click event I’m not sure I can just use $('a').removeClass('active');

Waiting for your feedback!

Thank you

[albrecht]

Hi @thisisbbc,

Please try this code, I updated your code a bit.

jQuery(document).ready(function($) {
  
$('#creator-menu .x-col a.x-anchor').click(function(e) {
		$('a').removeClass('active');
		$(this).addClass('active');
});
  
$(function() {
	if( location.href.split("#")[1] != "") {
  		$('#creator-menu .x-col a.x-anchor[href*="' + location.href.split("#")[1] + '"]').click();
    } 
});


})

Please let us know how it goes.

We really want to help you out more but this is outside of our support scope.

I just want to tell you that this looks like a good functionality to add to the theme, we will add it in a feature request, so that the development team will decide if it will be added in the future.

Thanks

[thisisbbc]

Hey @albrechtx,

Thanks x1000 for this snippet, it worked like a charm!

I also appreciate the consideration for the feature request. I think other users would also benefit from this

Have a great day ahead!

All best,
B

[ruenel]

You’re welcome!
We’re glad @Albrechtx’s solution works out for you.