Not the active, sorry my post was messed up and I just redid it. Not the active you need to add, just the class for the LI tags and the A tags to identify the tab set. Each set of tabs you add to a page has to be unique in that it cannot have the same identifying class. Without "any" identifying class you have a bunch of tab sets on a bunch of buttons all trying to share the same original tab setup.
Just go into the Attributes area and add a class to the LI's and the A's (same one for each set) and that should fix you up.
OMg that stupid post didn't come out right still, hang on let me repost it again with the correct code lol. It missed the classes on the A tags. One sec
No worries for the formatting on the post. I got it, thanks! Your solution worked fine. It was just a unique class problem. I thought it just worked with the IDs, now it's fine.
Many thanks!
Putting classes on the tabs LI's has nothing to do with the issue. It may seem like it worked it's self out for you but the classes aren't used by the script to determine how the tabs work.
I started a new project and drag/drop in to the body multiple Tabs components, renamed each tabs tab-pane ID and it's associated links URL.
No classes added or changed all tabs works. Even added additional tabs to existing components, all worked.
Now I've looked at your project as well and the first thing I see:
Modal tab for compensi, you HARD CODED the active state on the first tab-pane. I know that because your code has the active class as not a locked class which if you do a new project and drag in a tab section you will notice that active class is locked on both the link and the tab-pane. But it's only locked on the second links URL and HARD CODED on the first tab-pane. Which means at some point you typed in the active class, probably some point after having added other tab sections and trying to get the first tab-pane to show. I don't really know that's just what makes sense.
You have a similar situation for the modal codice fiscale second URL active set, but first tab-pane HARD CODED active.
Your other modals tabs are all setup the same way but not like the others, first URL active and first tab-pane HARD CODED active.
The hard coding of the tab-pane's active class state is the root cause, the BSS toolbar still can not switch between the tabs and content because of the hard coding which effectively broke it.
If messing with all the classes you did somehow got the toolbar working again then great but the root issue was the initial hard coding of the active class in the first place.
Saj
P.S. I shouldn't say the classes aren't used like that but I ment the association of the links to panels, the classes are using for the display but it's the IDs/URLs that associate which is to what.
Indeed, it seemed it worked, at first. But working on my project today I noticed it didn't work at all.
I had to hard code the active class because it disappeared automatically when I changed the ID and there was no other way to make the pane visible both in the editor and in the browser.
You can see that in the screen recording I made at second 40: screenrec
For instance I made a 3 column row with the side columns containing tab links and the center column containing the tab-content with the tab-panes.
Then I associated the tab link URLs with a corresponding tab-pane added in all the necessary roles and data-toggles etc...
Each tab in a browser preview displays the appropriate tab content. Obviously, the BSS app has no toolbar association since I did it by hand with drag/drop not a prebuilt component.
The boostrap js when it sees a link with the data-toggle=tab and it's clicked it looks at the URL finds the corresponding element on the page and then switches it's classes around in the parent element of tab-content based on the URL clicked. Without the parent element of tab-content, everything is visible, with it, only the element with active is visible. That's what the classes do, the ID/URL create the association between them.
So the JS uses the URL to find the element on the page with that ID then finds the ID's parent element with the class tab-content then adjusts it's children elements classes based on the URL and ID association.
So in short the browser ends up working because effectively the boostrap js clears out the active state of the tab-panes then assigns the active state after that. The BSS app apparently doesn't work that way, I don't know how the Devs programmed it. :( sorry.
I'm sorry but right now you're in a broken state because you did the hard coding, had you never done that, I think it would have worked out. At least it seemed that way when I just did renaming. Once I hard coded I couldn't get it to work with the toolbar in the app again. I'd have to start my tab section over to get back to a working toolbar.
But the problem is that I hard coded the active state only after it was already broken. In fact when the original component pane is set to active without id change the active class is automatically added and locked in.
Here's the issue, in your video, look up at the top right of the app in the video while your video is "adding" a href attribute. Up there you will see the URL, you didn't change that. That is what you are supposed to change. That is why you're breaking it.
So I tried it myself and notice that in the Option pane on the top right the URL does not change when you add the href attribute so now you have basically 2 associations conflicting with each other.
Don't add the href attribute, edit the correct place in the Options pane for the links URL. I'm sure once you start to do it that way it will work out.
Sorry, I had assumed you were editing in the appropriate places. But I'm sure once you hard coded the active class, I don't think that will fix all your old tab sections, but it should start working correctly on any new tabs sections you create.
Actually, I reopened your project and on the compensi modal I was able to correct the URL(s) in the Options pane and remove the Links add href attribute(s) and it looks like that toolbar came back to life. So you can probably get your system all back into shape. It appears to me that, that will work. :)
What a long strange trip it's been to figure this one out. :)
Just did the same for contributi modal and that is working as well.
Saj
P.S. you will need to remove your hard coded active classes though.
Finally!
I can't believe it was this easy. I didn't even notice the URL option before, I just assumed that changing the href would've done it. I'm so used to manually code things that I didn't even think of it. It will serve as a lesson: from now on I will always check if BSS has a built in option for what I need.
Thanks a lot. And sorry for the big fuzz!