Hide personnal tabs in the player ?

Nov 15, 2018

Hi Community

In SL2, I have added personnal tabs in the player.

For some slides, I want to hide some tabs using the "Player Features" in the "Slide Properties" of these slides. However I can only hide the native tabs Menu, Glossary, Documents, Notes and Seekbar.

Is there any solution to hide the added Tabs ?



16 Replies
Leslie McKerchie

Hi Sean,

Thanks for reaching out and letting us know that this is a feature you would like to see as well.

I was able to track down a few requests and pulled them together in a report for our team.

I wanted to share some information about how we manage these feature requests as that may be helpful.

This conversation has been included so that any updates we have in the future can be shared with you here.


You can use JavaScript (technically JQuery) to accomplish this.

  1. Find your custom tabs and give them a unique ID.
    You can do this "At timeline start" on your very 1st slide. All of your custom tabs have the same ID so changing this to a unique ID will give you more control. The following example is for a course with 2 custom tabs. It will update the id's to tab1 and tab2. "tab1" will be the first tab found searching from left to right across the bar.
    $("#tab-customlink").attr("id", "tab1");
    $("#tab-customlink").attr("id", "tab2");
  2. Now that they have a unique ID, you can execute more code whenever you want to hide them or show them.  For example, if I wanted to hide the 2nd tab but leave the 1st one visible, I would use the following:

    If I wanted to now show the hidden 2nd tab and hide the first one, I would do the following:
Nedim Ramic

Hi all,

It looks like these elements are identified as a button group with the ID of "links-right". Every single button has ID of "link-right-0", "link-right-1", "link-right-2" etc. The first tab from right would have the ID of "link-right-0".  They can be hidden or shown with Javascript. Example below:

Jerry Beaucaire

Nedic, Owen,

I have tried to implement this trick to hide the MUSIC: DOWN element and the UP element in the top menu bar.  The elements appear to be "link-right-0" and "link-right-1".

When I add the code elements to my project and publish, inspect, I do not even see the "Display = "none" parameter shown, so something is slightly different.  In Nedim's example course above, I do see the parameter and I see it change when the button is clicked.

Can anyone spot what is different in my course?

Review: https://360.articulate.com/review/content/ead51396-473f-47d0-bc53-d691f945f9d5/review



I haven't gone through the whole file but I did immediately notice that you have mixed use of single and double quotes in your JavaScript when surrounding some of your code.  Be sure that if you open with a single, you close with a single. If you open with a double, you close with a double.

Here is an example from your code: ('#link-right-0")
Which should be either ('#link-right-0') or ("#link-right-0")

Jerry Beaucaire

Oops!  Thanks for that, I did correct the quotes and still no joy.  Grrr.

const tab1 = document.querySelector(”#link-right-0"); 
tab1.style.display = "none";
const tab2 = document.querySelector(”#link-right-1");
tab2.style.display = "none";

The display parameter still isn't even showing when I inspect the published page.

Jerry Beaucaire

Ok, this is an old course, so I do need to go looking for that old stuff, too.  Thanks for the reminder.  

I just checked this technique on last month's safety quiz and it works swimmingly, so this will work for me, I just have to keep digging in this old course until I find what is causing the break.

Thanks for looking at it, I'll keep stripping out the old stuff until it starts behaving.