Expand my Community achievements bar.

SOLVED

Hiding a coral tab

Avatar

Level 5

I'm trying to hide a tab using javascript.

I've tried

.hide();

addClass("hidden");

addClass("hide");

all just hide the tab content but not the tab itself.

1690519_pastedImage_0.png

I can achieve hiding the tab by adding "sling:hideResource" in tab 2 properties. How can I do this using javascript?

Thanks!

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi,

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:

$target.not(".hide").attr("hidden", "hidden");

Inside the showHide function.

Thanks,

Antonio

View solution in original post

6 Replies

Avatar

Level 10

Tab element and its content are two different DOM element, you have to hide and show them separately.

Avatar

Level 5

I've applied my hide class to my tab container. but only contents get's hidden

Avatar

Level 7

Hi,

are you using a javascript in order to change the dialog content?

In the coral API [0]  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.

[0] CoralUI

Thanks,

Antonio

Avatar

Level 5

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.

1691136_pastedImage_2.png

and the javascript that I am using is a modified version of this

1691137_pastedImage_7.png

I'm trying Java approach now as I'm starting to think javascript and gonna suffice. but still very much open for javascript solutions.

@antoniom54959291

Avatar

Correct answer by
Level 7

Hi,

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:

$target.not(".hide").attr("hidden", "hidden");

Inside the showHide function.

Thanks,

Antonio