Forum Discussion
JavaScript Tricks for Articulate Storyline 3/360 show/hide menu
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.
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';
Thanks for posting this Math! It came in very handy today.
