all just hide the tab content but not the tab itself.
you could try to override the dropdownshowhide.js in order to manage also the attribute value in your components.
I think that you just only need to add the following line:
Inside the showHide function.
Thanks for taking your time.
But unfortunately, that code only accomplishes what .class("hide") and .class("hidden") can accomplish and that is it only hides the content.
here's how I did it.
In the coral API  it's indicated that if you want to hide all the tab you need to apply an HTML attribute "hidden".
If you are using js, you need to run a command like the following:
$('mytab'). attr("hidden", "");
So the result is like the following:
<coral-tab hidden="" ...}" class="coral-Tab" role="tab" id="coral-id-499" aria-controls="coral-id-526" aria-invalid="false" aria-disabled="false" aria-selected="false" tabindex="-1"><coral-tab-label>Item Settings</coral-tab-label></coral-tab>
Let me know if this could help you.
I've applied my hide class to my tab container. but only contents get's hidden
Tab element and its content are two different DOM element, you have to hide and show them separately.