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!