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
Mark Cairns

Hi Zsolt,

I've been using the menu open code you provided  $( ".menu-icon-wrapper" ).click(); for a while now. However, I just republished a course and it has stopped working. If I run it in the chrome console it works but not on the button in Storyline. Have you experienced this lately? I'm using the latest version of 360.

Thanks!

 

Mark Cairns

Thanks Phil! I found a fix.

Execute this JavaScript on the Slide Master:

function dynamicallyLoadScript(url) {

var script = document.createElement("script");

script.src = url;

document.head.appendChild(script);
}

dynamicallyLoadScript("https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js");

And add this JavaScript trigger to the button:

 $( " .menu-icon-wrapper " ).click();

Allan Bolton

Hi Phil,

I thought you might be able to point me in the right direction...

Just wondering/hoping if someone has had any success getting the Hide/Show Sidebar toggle js to work in SL3 V10 released June 6th 2020 as it did in the previous version.

Hide/Show Sidebar toggle works fine i.e., fade/close/minimize using the selector '.area-secondary' when published using SL3 V9 with jQuery bundled

$('.area-secondary').animate ({ width: 'toggle', opacity: 'toggle' });

After updating to SL3 V10 with jQuery removed I referenced it using method #1 from - Storyline 360 and Storyline 3: How to Reference the jQuery Library

In SL3 V10 the selector has changed to ID '#sidebar' and is contained in a <section> SL3 V9 used <div>

When using the following code the Hide/Show Sidebar toggle only toggles the opacity but doesn't appear to toggle width i.e., close/minimize the sidebar

$('#sidebar').animate ({ width: 'toggle', opacity: 'toggle' });

I've included samples for SL3 V9 and SL3 V10 here for comparison if anyone is interested to have a look.

Thanks

Alx Sanchez

Hi,

I have included a storyline file below that shows how to toggle the Glossary tab and it shows its content. I was able to do so given all the information presented here.

The breakthrough for me was Mark Cairns’ answer to Phil Mayor. I also looked at Zsolt Olah's site https://www.rabbitoreg.com/examples/p99/#/

Enjoy!