Forum Discussion

MrY's avatar
MrY
Community Member
8 years ago

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

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
storyline 360
BartVandenBr275's avatar
BartVandenBr275
Community Member
3 years ago

Things go wrong when testing this is Review.


It seems like the querySelector for the menu can not reach the element inside of the Iframe the course is loaded. The behaviour might be the same in an LMS but I have not tested this.

Jürgen_Schoene_'s avatar
Jürgen_Schoene_
Community Member
3 years ago

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();