Forum Discussion
Customizing Player
It’s a custom tab that can be selected, unselected, or deleted in the Player Properties. When selected or unselected, the tab's state (visibility) applies globally across all slides. To remove the "CONTACT" tab from specific slides, you would need to use JavaScript to target that tab and remove it from those slides only. Execute JavaScript when the timeline starts on this slide:
const tabs = document.querySelectorAll(".custom-link"); tabs.forEach(tab => { let contactTab = tab.querySelector('span') if (contactTab.textContent.trim() === "CONTACT") { tab.style.display = 'none'; // hide } });These buttons each have their own ID that can be targeted individually. However, I used a slightly longer code to target your tab by its text content, as I'm unsure how many custom tabs are in your project.
To ensure the "CONTACT" tab appears on specific slides, execute the JavaScript when the timeline starts on those slides:const tabs = document.querySelectorAll(".custom-link"); tabs.forEach(tab => { let contactTab = tab.querySelector('span') if (contactTab.textContent.trim() === "CONTACT") { tab.style.display = 'inline-block'; // show } });
Nedim thank you for this code to hide and show custom tabs, I have it working in a project. I do have a question, if I wanted to hide the custom tab when the project loads (there is audio on the first slide), where can I put this code? The tab is not clickable, and disappears as soon as the first slide loads, but it would be best to reveal the tab at a certain point and not show on load. Thanks in advance.
You can execute this JavaScript when the timeline starts on the Master Slide to ensure the function is globally available:
window.toggleContactTab = function(action) {
const tabs = document.querySelectorAll(".custom-link");
tabs.forEach(tab => {
let contactTab = tab.querySelector('span');
if (contactTab && contactTab.textContent.trim() === "CONTACT") {
tab.style.display = action === 'hide' ? 'none' : 'block';
}
});
};Then, on any slide where you want to show or hide the Contact tab, execute the following JavaScript when the timeline starts on this slide:
toggleContactTab('hide'); // Hides the CONTACT tab
toggleContactTab('show'); // Shows the CONTACT tabIf the Contact tab is initially hidden and you want it to appear at a certain point (e.g., when a variable becomes true), run toggleContactTab('show') when the variable changes to true.
Nedim Thank you. Sorry I was not clear that the project I am working on uses the classic player, so the custom tabs appear on screen before the start course button is used. Any insight as to where the scripts can be placed (not in an action programmed in Storyline, but as an edit to the html or script files generated by publishing) to hide the custom buttons before the player is loaded would be greatly appreciated!
It’s been a really long time since I last used the Classic Player. I’d need to take a look at the HTML structure to see if I can come up with some JavaScript code for you. Come to think of it, I’ve actually never written any code in a course running in the Classic Player. But I’ll do my best.
