Trying to use the css from https://www.lightningdesignsystem.com/components/tabs/#flavor-default to create a tab on my component.
In the documentation they say i need to toggle classes on different objects to make it work like a tab:
JavaScript Needs
The active tab has two markup requirements:
The .slds-active class should be placed on the li with .tabs–{variant}__item.
The corresponding .tabs–{variant}__content container receives .slds-show.Inactive .tabs–{variant}__content containers receive .slds-hide. When the user clicks a different tab, move the .slds-active class and toggle the .slds-hide/.slds-show classes.
I saw that you can use $A.utils.find() to find an object by a specific aura:id, but how then I go over all the other objects and remove the .slds-active/.slds-show classes?
With jQuery I could simply search by class/id, but I'm trying to achieve this without jQuery and just using tools given by the Aura framework (I would expect it to be possible with there existing an option in the Lightning Design System).
Best Answer
So I figured out a way to do this (hence adding it as an answer), but it feels very very ugly, and I'm sure I'm not using some basic Aura abilities.. so any improvements are more than welcome. Here's the code:
Component markup:
Helper (used to find the div I clicked in):
JS Controller (main logic):