I don’t think there’s a built-in way to achieve this right now, but it can be done with css injection.
See this thread.
I see two ways:
Make a style class for each one of the tabs you want to hide (hide_tab1
, hide_tab2
, etc).
In each of those style classes, put this in the background-position
property (or any other property that lets you type things): } .psc-hide_tabX .tab-menu-item[data-index="X-1"] {display: None } {
Of course you’ll have to change that to match the class and tab:
for tab 2 it will be } .psc-hide_tab2 .tab-menu-item[data-index="1"] {display: None } {
,
for tab 3 } .psc-hide_tab3 .tab-menu-item[data-index="2"] {display: None } {
etc.
Then add the appropriate classes to your tab container’s style when changing views/doing whatever triggers the hiding of some tabs.
solution 2:
Add a custom property on your tab container to store the indices of the tabs you want to hide. You’ll have to update this property whenever you need to hide/display tabs.
Add any property to the tab container’s style, and bind it to your custom property.
then add a script transform, and put this in:
return "}} {} {{display: None }} {{".format(', '.join(".tab-menu-item[data-index='{}']".format(tab) for tab in value))
note that the tab indices are 0-based. If you’re putting 1-based indices in the custom prop, you’ll need to adjust them.