JavaScript Tricks for Articulate Storyline 3/360 show/hide menu

Oct 17, 2017

Has anyone got the show/hide menu to work here on the Elearning Brothers website?

I've tried attaching the code to a button but nothing seems to happen

 

Thanks

44 Replies
Jen P

Does anyone know how I can toggle the Notes tab (in the top bar, not the side bar). I've tried Mark Cairns' and Alx Sanchez's approaches, and while they worked for toggling the menu in the sidebar, I had no luck with the tabs in the top bar. The trigger I used was $('.transcript-link').click() . Is there something I'm missing? 

 

Math Notermans

Instead of relying on jQuery it can be easier to use Vanilla Javascript instead...

As this is Allen's code for it:

$( " .menu-icon-wrapper " ).click();
$( " .glossary-tab " ).click();
$( " .view-content " ).click();

removing and changing the jQuery ( $ ) for plain Vanilla Javascript is like this:

document.querySelector("#hamburger > div").click();
document.querySelector("#glossary-tab").click();
document.querySelector("#play-pause > div").click();

If you need other elements in Storyline to show/hide...use the inspector to find its proper selector

Alx Sanchez

Hi James,


Create a slide trigger:

Execute JavaScript
When the timeline reaches time 1s

Where the JavaScript is:
document.querySelector("#hamburger > div").click();
document.querySelector("#glossary-tab").click();
document.querySelector("#play-pause > div").click();

Best,

Alx

Colin Lynas

This is an excellent solution Math. I really appreciate that you kept it simple!

document.querySelector("#hamburger > div").click();

I was wondering if you, or anyone else, knows how to make the default state of the menu and the hamburger invisible. In fact, as I am using my own button to call the menu, the hamburger icon becomes completely reductant so really I am asking....

Is possible to permanently hide the hamburger and have the menu invisible / collapsed as its default state.  

My goal is to have the menu invisible until the end user needs it, then it can appear using a regular button in the course with the code above to toggle the menu when it is needed. 

Thank you in advance for any support you may have.

Math Notermans

To make elements invisible in Storyline360 you can use GSAP code. As GSAP is built into Storyline360 its the easiest way to animate elements. And offcourse simply hide them.

let hamburger = document.querySelector("#hamburger > div");
gsap.set(hamburger, { autoAlpha:0 });

To show the hamburger menu icon again you can add this to a button...

let hamburger = document.querySelector("#hamburger > div");
gsap.to(hamburger, {duration:1.5,autoAlpha:1});

In GSAP set directly sets values and to animates them over time

Remember this only works in Storyline360 as the GSAP Javascript library is built in.

To do the same in Storyline3 you can change the style of the element. Like this.

let hamburger = document.querySelector("#hamburger > div");
hamburger.style.display = 'none';

And to show it again on a button...

let hamburger = document.querySelector("#hamburger > div");
hamburger.style.display = 'block';

Colin Lynas

Just excellent, a truly elegant solution. 

document.querySelector("#hamburger > div"); hamburger.style.display = 'none';

I have it attached to a timeline start action so the end user doesn't see it and they can use the custom button to show/hide the sidebar menu.

----------------------

My final challenge should be simple CSS, I would like to have the sidebar overlay the content rather than resize it. Just working on some CSS swaps. 

Thank you again for the help.

Jürgen Schoenemeyer

the querySelector starts always from the current DOM root - so iframes are not problematic

just tested on Review 360 - the version with and the version without gsap is working

https://360.articulate.com/review/content/e9af0b67-3746-4de5-82a1-8fa8a3f610ce/review

hide gsap:

gsap.set("#hamburger", {pointerEvents: 'none'});
gsap.to("#hamburger > div", {duration:0.5, autoAlpha:0});

show gsap:

gsap.to("#hamburger > div", { 
 duration: 1,
 autoAlpha:1,
 onComplete: function(){
   gsap.set("#hamburger", {pointerEvents: 'auto'});
 }
});

hide:

document.querySelector("#hamburger").style.pointerEvents = 'none';
document.querySelector("#hamburger > div").style.visibility = 'hidden';
document.querySelector("#hamburger > div").style.opacity = 0;

show:

document.querySelector("#hamburger").style.pointerEvents = 'auto';
document.querySelector("#hamburger > div").style.visibility = 'inherit';
document.querySelector("#hamburger > div").style.opacity = 1;

toggle:

 document.querySelector("#hamburger > div").click();