Forum Discussion
Hide personnal tabs in the player ?
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 ?
Rick
Hi Ricky!
You can hide the built-in tabs (Menu, Notes, etc.) on a slide-by-slide basis, but there isn't a way to hide custom tabs.
Let me know if you have other questions about that!
- EricRCommunity Member
HI Alyssa,
thanks for your reply.
No more question, but hope Articulate will take into account this possibility. I have just discovered that equivalent questions were asked 6 years ago...
Ricky
- SeanGainford-09Community Member
Coming up to 2020, would be great to have this feature ...
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.
- OwenHoltSuper Hero
You can use JavaScript (technically JQuery) to accomplish this.
- 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"); - 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:
$("#tab2").hide();
If I wanted to now show the hidden 2nd tab and hide the first one, I would do the following:
$("#tab1").hide();
$("#tab2").show();
- JenniferWalk652Community Member
Hey, Owen. How does one locate the ID of a tab and then change it?
I see how to execute JavaScript and then enter the code, but I cannot locate the ID of any tabs.
Thanks.
- Find your custom tabs and give them a unique ID.
- OwenHoltSuper Hero
This has changed a bit since Articulate no longer uses jquery.
@Math Notermans posted a hack a while ago where he used custom accessibility names to identify elements in SL. Maybe we could give that a try. Do you have an example file? - NedimCommunity Member
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:
https://360.articulate.com/review/content/ad005277-0909-4242-877d-dc16f3909d0b/review - JerryBeaucaireCommunity Member
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
- OwenHoltSuper Hero
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")
- JerryBeaucaireCommunity Member
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.
- OwenHoltSuper Hero
I 'struck out' the jquery and located every instance I could find of the mis-matched quotes. It was on multiple slides and I think I found one on your master as well. Once I updated the quotes and removed the jquery, it appears your script is working.
- OwenHoltSuper Hero
Be sure you are finding it everywhere. I also noticed some jquery code. StoryLine no longer loads the jquery library.
$( ".menu-icon-wrapper" ).click(); <-- this could be breaking everything.