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.

  • MathNotermans-9's avatar
    MathNotermans-9
    Community Member
    3 years ago

    Review has issues for quite a while. When using Javascript / CSS selectors you cannot depend on Review as there are iframes and divs added. And fixing your code pure for Review is unneeded work.. you can however if you want...check the URL for 'Review' and add rules for that.

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